/*
 * Front page CSS
 */

/* ======================================
  TOP Opening
  JS準備完了まで完全非表示 → 上下から中央へ収束
====================================== */

body.has-poscom-opening.is-opening {
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
  touch-action: none;
  --poscom-opening-converge-y: clamp(110px, 20vh, 230px);
  --poscom-opening-bg-image: url("/wp-content/uploads/2026/06/back-light-04.jpg");
  --poscom-opening-bg-fallback:
    linear-gradient(120deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 250, 249, 0.96) 46%, rgba(255, 255, 255, 1) 100%),
    linear-gradient(90deg, rgba(22, 198, 211, 0.16), rgba(6, 27, 58, 0.03));
  background:
    var(--poscom-opening-bg-fallback),
    #f5fbfb;
}

body.home.is-opening,
body.front-page.is-opening {
  height: 100vh;
  overflow: hidden !important;
  touch-action: none;
}

body.home.is-opening::before,
body.front-page.is-opening::before,
body.has-poscom-opening.is-opening::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background:
    var(--poscom-opening-bg-fallback),
    #f5fbfb;
  pointer-events: auto;
}

body.home.is-opening .l-header,
body.home.is-opening .l-footer,
body.home.is-opening .p-fixBtnWrap,
body.home.is-opening .c-fixBtn,
body.front-page.is-opening .l-header,
body.front-page.is-opening .l-fixHeader,
body.front-page.is-opening #header,
body.front-page.is-opening #main_visual,
body.front-page.is-opening .p-mainVisual,
body.front-page.is-opening #content,
body.front-page.is-opening .l-mainContent,
body.front-page.is-opening .l-footer,
body.front-page.is-opening .p-fixBtnWrap,
body.front-page.is-opening .c-fixBtn,
body.has-poscom-opening.is-opening .l-header,
body.has-poscom-opening.is-opening .l-fixHeader,
body.has-poscom-opening.is-opening #header,
body.has-poscom-opening.is-opening #main_visual,
body.has-poscom-opening.is-opening .p-mainVisual,
body.has-poscom-opening.is-opening #content,
body.has-poscom-opening.is-opening .l-mainContent,
body.has-poscom-opening.is-opening .l-footer,
body.has-poscom-opening.is-opening .p-fixBtnWrap,
body.has-poscom-opening.is-opening .c-fixBtn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.poscom-opening:not(.poscom-opening--root) {
  display: none !important;
}

body.has-poscom-opening.is-opening > .poscom-opening.poscom-opening--root,
.poscom-opening.poscom-opening--root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  padding: clamp(24px, 5vw, 72px) !important;
  background:
    var(--poscom-opening-bg-fallback),
    #f5fbfb !important;
  color: #061b3a !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transform: none !important;
}

.poscom-opening.poscom-opening--root::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--poscom-opening-bg-image) center center / cover no-repeat;
  opacity: 1;
}

.poscom-opening.poscom-opening--root::after {
  content: "";
  position: absolute;
  top: clamp(30px, 5.5vh, 68px);
  left: 0;
  width: min(520px, 42vw);
  height: 2px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(22, 198, 211, 0.18) 14%, #16c6d3 52%, rgba(22, 198, 211, 0.2) 84%, transparent 100%);
  box-shadow:
    0 0 18px rgba(22, 198, 211, 0.34),
    0 0 42px rgba(22, 198, 211, 0.18);
  opacity: 0;
  transform: translateX(-56vw);
  animation: poscomOpeningTopLine 1.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.poscom-opening.poscom-opening--root .poscom-opening__inner {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-width: calc(100vw - 40px);
  margin: 0 auto;
  text-align: center;
  transform: none !important;
}

/* JS準備前は必ず隠す */
.poscom-opening.poscom-opening--root:not(.is-ready) .poscom-opening__message,
.poscom-opening.poscom-opening--root:not(.is-ready) .poscom-opening__logo {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 準備完了後だけ表示対象になる（critical CSS の常時 opacity:0 を上書き） */
body.has-poscom-opening.is-opening > .poscom-opening.poscom-opening--root.is-ready .poscom-opening__message,
body.has-poscom-opening.is-opening > .poscom-opening.poscom-opening--root.is-ready .poscom-opening__logo,
.poscom-opening.poscom-opening--root.is-ready .poscom-opening__message,
.poscom-opening.poscom-opening--root.is-ready .poscom-opening__logo {
  opacity: 1 !important;
  visibility: visible !important;
}

.poscom-opening.poscom-opening--root .poscom-opening__message {
  margin: 0;
  color: #061b3a;
  font-size: clamp(30px, 5.2vw, 74px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.04em;
  max-width: 100%;
  opacity: 1;
  overflow-wrap: normal;
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 48px rgba(22, 198, 211, 0.18);
  transform: translateY(calc(var(--poscom-opening-converge-y) * -1));
}

.poscom-opening.poscom-opening--root .poscom-opening__char {
  display: inline-block;
  will-change: transform, opacity;
}

.poscom-opening.poscom-opening--root .poscom-opening__logo {
  display: block;
  width: clamp(160px, 20vw, 300px);
  margin: clamp(22px, 3vw, 42px) auto 0;
  opacity: 1;
  transform: translateY(var(--poscom-opening-converge-y));
}

.poscom-opening.poscom-opening--root .poscom-opening__logo img,
.poscom-opening.poscom-opening--root .poscom-opening__logo-img {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  filter:
    drop-shadow(0 16px 30px rgba(6, 27, 58, 0.10))
    drop-shadow(0 0 18px rgba(22, 198, 211, 0.12));
}

.poscom-opening.poscom-opening--root.is-finished {
  display: none !important;
}

@keyframes poscomOpeningTopLine {
  0% {
    opacity: 0;
    transform: translateX(-56vw);
  }

  16% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(112vw);
  }
}

@media (max-width: 600px) {
  body.has-poscom-opening.is-opening {
    --poscom-opening-converge-y: clamp(86px, 18vh, 150px);
  }

  .poscom-opening.poscom-opening--root {
    padding-inline: 16px !important;
  }

  .poscom-opening.poscom-opening--root .poscom-opening__message {
    font-size: clamp(20px, 5.7vw, 30px);
    line-height: 1.24;
    letter-spacing: 0.01em;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  body.has-poscom-opening.is-opening > .poscom-opening.poscom-opening--root .poscom-opening__message {
    font-size: clamp(20px, 5.7vw, 30px) !important;
    letter-spacing: 0.01em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance;
  }

  .poscom-opening.poscom-opening--root .poscom-opening__logo {
    width: clamp(132px, 42vw, 190px);
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.has-poscom-opening.is-opening {
    height: auto;
    overflow: auto !important;
    touch-action: auto;
  }

  body.home.is-opening,
  body.front-page.is-opening {
    height: auto;
    overflow: auto !important;
    touch-action: auto;
  }

  body.home.is-opening::before,
  body.front-page.is-opening::before,
  body.has-poscom-opening.is-opening::before {
    content: none;
  }

  body.home.is-opening .l-header,
  body.home.is-opening .l-footer,
  body.home.is-opening .p-fixBtnWrap,
  body.home.is-opening .c-fixBtn,
  body.front-page.is-opening .l-header,
  body.front-page.is-opening .l-footer,
  body.front-page.is-opening .p-fixBtnWrap,
  body.front-page.is-opening .c-fixBtn,
  body.has-poscom-opening.is-opening .l-header,
  body.has-poscom-opening.is-opening .l-footer,
  body.has-poscom-opening.is-opening .p-fixBtnWrap,
  body.has-poscom-opening.is-opening .c-fixBtn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .poscom-opening.poscom-opening--root {
    display: none !important;
  }
}

/* ======================================
  Pickup banner placement
====================================== */

.home #content,
.front-page #content,
#content {
  position: relative;
  z-index: 5;
}

#pickup_banner {
  position: relative;
  z-index: 10;
  margin-top: clamp(-120px, -7vw, -72px);
  margin-bottom: 30px;
}

@media not all and (min-width: 960px) {
  #pickup_banner {
    margin-top: clamp(-72px, -9vw, -40px);
    margin-bottom: 48px;
  }
}

@media not all and (min-width: 600px) {
  #pickup_banner {
    margin-top: -40px;
    margin-bottom: 40px;
  }
}

/* ======================================
  Upper pickup banners
====================================== */

#pickup_banner .c-bannerLink {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow:
    0 30px 58px rgba(6, 27, 58, 0.22),
    0 12px 24px rgba(6, 27, 58, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.8) inset;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

#pickup_banner .c-bannerLink:hover {
  transform: translateY(-5px);
  box-shadow:
    0 26px 52px rgba(6, 27, 58, 0.2),
    0 8px 18px rgba(6, 27, 58, 0.1);
}

#pickup_banner .c-bannerLink__figure,
#pickup_banner .c-bannerLink__img,
#pickup_banner .c-bannerLink:hover .c-bannerLink__figure,
#pickup_banner .c-bannerLink:hover .c-bannerLink__img {
  opacity: 1 !important;
}

#pickup_banner .c-bannerLink__figure,
#pickup_banner .c-bannerLink__img {
  border-radius: 0;
}

#pickup_banner .c-bannerLink__img {
  filter: brightness(0.82) saturate(0.96);
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

#pickup_banner .c-bannerLink:hover .c-bannerLink__img {
  transform: scale(1.04);
  filter: brightness(0.98) saturate(1.02);
}

#pickup_banner .c-bannerLink::before {
  background: transparent;
  opacity: 0;
}

#pickup_banner .c-bannerLink__label,
#pickup_banner .c-bannerLink__label::before {
  display: none !important;
  content: none !important;
}

/* ======================================
  Lower pickup banners
====================================== */

.poscom-sub-pickup {
  position: relative;
  z-index: 15;
  width: min(900px, calc(100% - 40px));
  margin: clamp(42px, 5vw, 72px) auto clamp(56px, 7vw, 96px);
}

.poscom-sub-pickup .swell-block-columns__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 420px));
  justify-content: center;
  gap: clamp(24px, 3vw, 48px);
}

.poscom-sub-pickup .swell-block-column {
  width: 100% !important;
  max-width: 420px;
  padding: 0 !important;
  --swl-clmn-pddng: 0 !important;
}

.poscom-sub-pickup .wp-block-image,
.poscom-sub-pickup figure {
  position: relative;
  display: block;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}

.poscom-sub-pickup .wp-block-image::before,
.poscom-sub-pickup figure::before {
  display: none !important;
  content: none !important;
}

.poscom-sub-pickup .wp-block-image a,
.poscom-sub-pickup figure a {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  background: var(--poscom-navy);
  box-shadow:
    0 30px 58px rgba(6, 27, 58, 0.22),
    0 12px 24px rgba(6, 27, 58, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.8) inset;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.poscom-sub-pickup .wp-block-image a:hover,
.poscom-sub-pickup figure a:hover {
  transform: translateY(-5px);
  box-shadow:
    0 26px 52px rgba(6, 27, 58, 0.2),
    0 8px 18px rgba(6, 27, 58, 0.1);
}

.poscom-sub-pickup .wp-block-image a img,
.poscom-sub-pickup figure a img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.96);
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.poscom-sub-pickup .wp-block-image a:hover img,
.poscom-sub-pickup figure a:hover img {
  transform: scale(1.04);
  filter: brightness(0.98) saturate(1.02);
}

.poscom-sub-pickup .wp-block-image a::before,
.poscom-sub-pickup .wp-block-image a::after,
.poscom-sub-pickup figure a::before,
.poscom-sub-pickup figure a::after,
.poscom-sub-pickup a[href*="data-entry"]::after,
.poscom-sub-pickup a[href*="storage"]::after {
  display: none !important;
  content: none !important;
}

.poscom-sub-pickup .alignleft,
.poscom-sub-pickup .alignright {
  float: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

@media not all and (min-width: 960px) {
  #pickup_banner,
  .poscom-sub-pickup {
    display: none;
  }
}

/* ======================================
  TOP News Rise Panel
  親グループなし版：NEWSエリアが前面にせり上がる
====================================== */

.poscom-news-panel-rise {
  position: relative;
  z-index: 30;
  overflow: hidden;

  /* 前のPick upエリアに少しかぶせる */
  margin-top: clamp(-90px, -7vw, -48px);

  /* NEWSエリアにしっかり余白を持たせる */
  padding-top: clamp(40px, 4.5vw, 72px) !important;
  padding-bottom: clamp(40px, 4.5vw, 72px) !important;

  background-size: 118% auto !important;
  background-position: 42% 50%;
  background-attachment: scroll !important;

  box-shadow: 0 -42px 100px rgba(5, 22, 44, 0.16);
  will-change: transform, background-position;
}

/* 背景画像の上に白〜薄緑の上品なフィルター */
.poscom-news-panel-rise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(243, 252, 241, 0.8) 48%,
      rgba(255, 255, 255, 0.9) 100%
    );
}

/* 中身を前面に */
.poscom-news-panel-rise .swell-block-fullWide__inner {
  position: relative;
  z-index: 1;
}

/* NEWSリストの見え方を少し上品に */
.poscom-news-panel-rise .p-postList {
  position: relative;
  z-index: 1;
}

.poscom-news-panel-rise .p-postList__item {
  border-color: rgba(5, 31, 62, 0.14);
}

@media (max-width: 959px) {
  .poscom-news-panel-rise .is-sp-rise-item-prepared {
    opacity: 0;
    transform: translate3d(
      var(--poscom-sp-rise-x, 0px),
      var(--poscom-sp-rise-y, 36px),
      0
    );
    transition:
      opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.86s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--poscom-sp-rise-delay, 0ms);
    will-change: opacity, transform;
  }

  .poscom-news-panel-rise .is-sp-rise-item-prepared.is-sp-rise-item-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .poscom-news-panel-rise .is-sp-rise-item-prepared,
  .poscom-news-panel-rise .is-sp-rise-item-prepared.is-sp-rise-item-visible {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ======================================
  TOP News Panel SP/TAB Gap Adjust
  Pick up見出し下の余白だけ調整
====================================== */

@media (max-width: 959px) {
  .poscom-news-panel-rise {
    margin-top: 6px !important;
    padding-top: 16px !important;
    padding-bottom: 42px !important;
    background-size: cover !important;
    background-position: center center !important;
    box-shadow: none;
  }
}

@media (max-width: 600px) {
  .poscom-news-panel-rise {
    margin-top: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 38px !important;
  }
}
/* ======================================
  TOP News List Design
  お知らせ一覧：日付 / カテゴリ / タイトル / 矢印
  ブランドカラー調整版
====================================== */

.poscom-news-panel-rise .p-postList.-type-simple {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  border-top: none;
}

/* 一番上の線 */
.poscom-news-panel-rise .p-postList.-type-simple::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(6, 27, 58, 0.12);
  pointer-events: none;
}

/* 各行 */
.poscom-news-panel-rise .p-postList__item {
  position: relative;
  border-bottom: none;
}

/* 2本目以降の線 */
.poscom-news-panel-rise .p-postList__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(6, 27, 58, 0.09);
  pointer-events: none;
}

/* リンク全体 */
.poscom-news-panel-rise .p-postList__link {
  position: relative;
  display: block;
  padding: 16px 58px 16px 0;
  color: #061B3A;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

/* 右矢印 */
.poscom-news-panel-rise .p-postList__link::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 12px;
  translate: 0 -50%;
  font-size: 28px;
  line-height: 1;
  color: #0B2C5E;
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.poscom-news-panel-rise .p-postList__link:hover {
  background-color: transparent;
}

.poscom-news-panel-rise .p-postList__link:hover .p-postList__title {
  color: #d71920;
}

.poscom-news-panel-rise .p-postList__link:hover .p-postList__cat {
  --poscom-cat-text: #d71920;
}

.poscom-news-panel-rise .p-postList__link:hover::after {
  transform: translateX(6px);
  color: #d71920;
}

/* 横並び本体 */
.poscom-news-panel-rise .p-postList__body {
  display: grid;
  grid-template-columns: 180px 150px minmax(0, 1fr);
  align-items: center;
  column-gap: 20px;
}

/* 日付・カテゴリをgridの部品として扱う */
.poscom-news-panel-rise .p-postList__meta {
  display: contents;
}

/* ======================================
  Date
====================================== */

.poscom-news-panel-rise .c-postTimes,
.poscom-news-panel-rise .p-postList__times {
  grid-column: 1;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 0;
  border-right: 1px solid #DDE5EC;
  text-align: center;
  color: #0B2C5E;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.17em;
  font-family: "Montserrat", "Arial", sans-serif;
  white-space: nowrap;
}

/* 更新マーク・投稿日マークを消す */
.poscom-news-panel-rise .c-postTimes__modified::before,
.poscom-news-panel-rise .c-postTimes__posted::before {
  display: none !important;
  content: none !important;
}

/* time自体の余計な装飾を抑える */
.poscom-news-panel-rise time {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* ======================================
  Category
====================================== */

.poscom-news-panel-rise .p-postList__cat {
  --poscom-cat-color: #0B2C5E;
  --poscom-cat-shadow: rgba(11, 44, 94, 0.14);
  --poscom-cat-text: #0B2C5E;

  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.72em;
  width: fit-content;
  color: var(--poscom-cat-text) !important;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-decoration: none;
  background: transparent;
  border: none;
  transition: color 0.25s ease;
}

/* SWELLのフォルダーアイコンを消して丸に置換 */
.poscom-news-panel-rise .p-postList__cat::before {
  content: "" !important;
  display: inline-block;
  width: 22.5px;
  height: 22.5px;
  flex: 0 0 22.5px;
  border-radius: 999px;
  background: var(--poscom-cat-color);
  box-shadow: 0 0 0 5px var(--poscom-cat-shadow);
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* ======================================
  TOP News Category Colors
  ブランドカラー最終おすすめ
====================================== */

/* お知らせ：やわらかい青緑 */
.poscom-news-panel-rise .p-postList__cat[data-cat-id="3"] {
  --poscom-cat-color: #53B2BB;
  --poscom-cat-shadow: rgba(83, 178, 187, 0.18);
  --poscom-cat-text: #2C7E86;
}

/* 最新情報：ブランドネイビー */
.poscom-news-panel-rise .p-postList__cat[data-cat-id="10"] {
  --poscom-cat-color: #0B2C5E;
  --poscom-cat-shadow: rgba(11, 44, 94, 0.16);
  --poscom-cat-text: #0B2C5E;
}

/* ブログ：ブランドグリーン */
.poscom-news-panel-rise .p-postList__cat[data-cat-id="11"] {
  --poscom-cat-color: #228E38;
  --poscom-cat-shadow: rgba(34, 142, 56, 0.16);
  --poscom-cat-text: #1D6E2E;
}

/* Uncategorized：仮色 */
.poscom-news-panel-rise .p-postList__cat[data-cat-id="1"] {
  --poscom-cat-color: #6E7B86;
  --poscom-cat-shadow: rgba(110, 123, 134, 0.15);
  --poscom-cat-text: #5B6670;
}

/* ======================================
  Title
====================================== */

.poscom-news-panel-rise .p-postList__title {
  grid-column: 3;
  margin: 0;
  color: #061B3A;
  font-size: clamp(14px, 1.08vw, 18px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.035em;
  transition: color 0.25s ease;
}

@keyframes poscomPulseButtonAnime {
  0% {
    opacity: 1;
    transform: scale(0.95);
  }

  90% {
    opacity: 0.1;
  }

  100% {
    opacity: 0;
    transform: scale(1.14, 1.36);
  }
}

.poscom-pulse-button {
  position: relative;
  width: min(250px, 100%);
  margin-inline: auto;
  transition: 0.2s;
}

.poscom-pulse-button::before,
.poscom-pulse-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(83, 178, 187, 0.28);
  border-radius: 32px;
  background: rgba(215, 25, 32, 0.24);
  box-shadow: 0 0 0 1px rgba(83, 178, 187, 0.08);
  transform: translate3d(0, 0, 0);
}

.poscom-pulse-button::before {
  animation: poscomPulseButtonAnime 2s ease-out infinite;
}

.poscom-pulse-button::after {
  animation: poscomPulseButtonAnime 2s ease-out 1s infinite;
}

.poscom-pulse-button a {
  position: relative;
  top: 3px;
  display: block;
  padding: 19px 0;
  border-radius: 32px;
  color: #ffffff !important;
  text-align: center;
  text-decoration: none;
  background: #8b110d;
}

.poscom-pulse-button a::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -3px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: #d71920;
  transition: 0.2s;
  transform: translate3d(0, 0, 0);
}

.poscom-pulse-button span {
  position: relative;
  z-index: 2;
  top: -3px;
  display: block;
  font-size: 18px;
  font-weight: 700;
  font-family: sans-serif;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #ffffff !important;
  transition: 0.2s;
}

.poscom-pulse-button span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  width: 10.5px;
  height: 10.5px;
  margin-top: -5px;
  border-top: 1.45px solid #ffffff;
  border-right: 1.45px solid #ffffff;
  transform: translateX(5px) rotate(45deg);
  transition: 0.3s 0.1s;
}

.poscom-pulse-button a:hover,
.poscom-pulse-button a:focus-visible {
  color: #ffffff !important;
}

.poscom-pulse-button a:hover {
  top: 3px;
}

.poscom-pulse-button a:hover::after {
  top: 0;
  background: #e62730;
}

.poscom-pulse-button a:hover span {
  top: 0;
  color: #ffffff !important;
}

.poscom-pulse-button a:hover span::after {
  right: 21px;
}

.poscom-news-panel-rise .poscom-estimate-banner {
  margin-top: 14px !important;
}

.poscom-news-panel-rise .poscom-estimate-banner img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(6, 27, 58, 0.12);
  box-shadow: 0 3px 8px rgba(6, 27, 58, 0.10);
}

.poscom-news-panel-rise .poscom-side-service-btn {
  overflow: visible;
}

.poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link {
  position: relative;
  overflow: visible;
  border-radius: 0 !important;
  transform: skew(-15deg);
  box-shadow: 0 5px 10px rgba(6, 27, 58, 0.10);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

.poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link::before,
.poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link::after {
  content: "";
  position: absolute;
  height: 1px;
  pointer-events: none;
  background: #ffffff;
  transition:
    right 0.3s ease,
    background-color 0.3s ease;
}

.poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link::before {
  top: 46%;
  right: 0;
  width: 3rem;
}

.poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link::after {
  top: 55%;
  right: 1rem;
  width: 2rem;
}

.poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link:hover {
  transform: skew(0);
  box-shadow: 0 2px 3px rgba(6, 27, 58, 0.10);
  filter: saturate(1.04);
}

.poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link:hover::before {
  right: -1.5rem;
  background: #0B2C5E;
}

.poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link:hover::after {
  right: -1rem;
  background: #0B2C5E;
}

/* ======================================
  TOP News List Responsive Step 1
  最新情報：投稿リストのみ SP/TAB 強制調整
  PCは触らない
====================================== */

@media (max-width: 959px) {
  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList.-type-simple,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList.-type-simple,
  #body_wrap.home .poscom-news-panel-rise .p-postList.-type-simple,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList.-type-simple,
  .poscom-news-panel-rise .p-postList.-type-simple {
    width: min(100%, 700px) !important;
    max-width: calc(100vw - 44px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__link,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__link,
  #body_wrap.home .poscom-news-panel-rise .p-postList__link,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__link,
  .poscom-news-panel-rise .p-postList__link {
    padding: 12px 34px 12px 0 !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__body,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__body,
  #body_wrap.home .poscom-news-panel-rise .p-postList__body,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__body,
  .poscom-news-panel-rise .p-postList__body {
    display: block !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__meta,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__meta,
  #body_wrap.home .poscom-news-panel-rise .p-postList__meta,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__meta,
  .poscom-news-panel-rise .p-postList__meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px 10px !important;
    margin: 0 0 4px !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .c-postTimes,
  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__times,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .c-postTimes,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__times,
  #body_wrap.home .poscom-news-panel-rise .c-postTimes,
  #body_wrap.home .poscom-news-panel-rise .p-postList__times,
  #body_wrap.page-id-10 .poscom-news-panel-rise .c-postTimes,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__times,
  .poscom-news-panel-rise .c-postTimes,
  .poscom-news-panel-rise .p-postList__times {
    min-height: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    justify-content: flex-start !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__cat,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__cat,
  #body_wrap.home .poscom-news-panel-rise .p-postList__cat,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__cat,
  .poscom-news-panel-rise .p-postList__cat {
    gap: 0.5em !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.055em !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__cat::before,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__cat::before,
  #body_wrap.home .poscom-news-panel-rise .p-postList__cat::before,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__cat::before,
  .poscom-news-panel-rise .p-postList__cat::before {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
    box-shadow: 0 0 0 3px var(--poscom-cat-shadow) !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise h3.p-postList__title,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise h3.p-postList__title,
  #body_wrap.home .poscom-news-panel-rise h3.p-postList__title,
  #body_wrap.page-id-10 .poscom-news-panel-rise h3.p-postList__title,
  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__title,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__title,
  #body_wrap.home .poscom-news-panel-rise .p-postList__title,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__title,
  .poscom-news-panel-rise h3.p-postList__title,
  .poscom-news-panel-rise .p-postList__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #061b3a !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.03em !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__title a,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__title a,
  #body_wrap.home .poscom-news-panel-rise .p-postList__title a,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__title a,
  .poscom-news-panel-rise .p-postList__title a {
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-decoration: none !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__link::after,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__link::after,
  #body_wrap.home .poscom-news-panel-rise .p-postList__link::after,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__link::after,
  .poscom-news-panel-rise .p-postList__link::after {
    right: 2px !important;
    font-size: 20px !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__item::after,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__item::after,
  #body_wrap.home .poscom-news-panel-rise .p-postList__item::after,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__item::after,
  .poscom-news-panel-rise .p-postList__item::after {
    height: 1px !important;
    background: rgba(6, 27, 58, 0.12) !important;
  }
}

@media (max-width: 374px) {
  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList.-type-simple,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList.-type-simple,
  #body_wrap.home .poscom-news-panel-rise .p-postList.-type-simple,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList.-type-simple,
  .poscom-news-panel-rise .p-postList.-type-simple {
    max-width: calc(100vw - 28px) !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise h3.p-postList__title,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise h3.p-postList__title,
  #body_wrap.home .poscom-news-panel-rise h3.p-postList__title,
  #body_wrap.page-id-10 .poscom-news-panel-rise h3.p-postList__title,
  .poscom-news-panel-rise h3.p-postList__title,
  .poscom-news-panel-rise .p-postList__title {
    font-size: 13.5px !important;
  }

  #body_wrap.home .post_content .poscom-news-panel-rise .p-postList__link,
  #body_wrap.page-id-10 .post_content .poscom-news-panel-rise .p-postList__link,
  #body_wrap.home .poscom-news-panel-rise .p-postList__link,
  #body_wrap.page-id-10 .poscom-news-panel-rise .p-postList__link,
  .poscom-news-panel-rise .p-postList__link {
    padding-right: 30px !important;
  }
}

/* ======================================
  TOP News Link Button SP Size
  お知らせ一覧ボタン：スマホだけ少し小さく
====================================== */

@media (max-width: 600px) {
  .poscom-news-panel-rise .wp-block-buttons.ml50 {
    justify-content: center !important;
    margin-left: 0 !important;
  }

  .poscom-news-panel-rise .wp-block-button.poscom-news-link-btn .wp-block-button__link,
  .poscom-news-panel-rise .poscom-news-link-btn .wp-block-button__link {
    min-width: 0 !important;
    width: min(260px, 72vw) !important;
    padding: 10px 18px !important;
    gap: 0.45em !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .poscom-news-panel-rise .wp-block-button.poscom-news-link-btn .wp-block-button__link img,
  .poscom-news-panel-rise .poscom-news-link-btn .wp-block-button__link img {
    width: 14px !important;
    height: 14px !important;
  }

  .poscom-news-panel-rise .wp-block-button.poscom-news-link-btn .wp-block-button__link .swl-inline-icon,
  .poscom-news-panel-rise .poscom-news-link-btn .wp-block-button__link .swl-inline-icon {
    margin-left: 0.08em !important;
    transform: translateY(0.5px) !important;
  }
}

/* ======================================
  TOP News CTA SP/TAB Gap Adjust
  お知らせ一覧ボタン下〜CTA上の余白調整
====================================== */

@media (max-width: 959px) {
  /*
    最新情報セクション直下の外側リッチカラムだけを対象にする。
    PC横並び用の2番目の空カラムは、縦積み時には不要。
  */
  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(2) {
    display: none !important;
  }

  /*
    右側CTAカラムを上に詰める。
    直下の3番目カラムだけを対象にして、内部のボタン用カラムには触らない。
  */
  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3) {
    margin-top: 18px !important;
    padding-top: 0 !important;
  }

  /*
    外側リッチカラムの縦gapも少し抑える。
    内側のサービスボタン用カラムには影響させない。
  */
  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner {
    row-gap: 0 !important;
  }
}

@media (max-width: 600px) {
  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3) {
    margin-top: 14px !important;
  }
}

/* ======================================
  TOP News CTA Button Gap SP/TAB Fix
  「まずはお気軽に」〜赤CTAボタン間をほぼ0にする
====================================== */

@media (max-width: 959px) {
  /*
    外側3番目のCTAカラム内で、
    「まずはお気軽に」の直後にある赤CTA用リッチカラムだけを狙う。
  */
  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3)
    > .wp-block-group
    > .wp-block-group__inner-container
    > .swell-block-columns:has(.poscom-pulse-button) {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    margin-bottom: 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    --swl-clmn-mrgn--y: 0rem !important;
    --swl-clmn-mrgn--x: 0rem !important;
  }

  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3)
    > .wp-block-group
    > .wp-block-group__inner-container
    > .swell-block-columns:has(.poscom-pulse-button)
    > .swell-block-columns__inner {
    display: block !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
  }

  /* 赤CTA用リッチカラム内の空1%カラムを消す */
  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3)
    > .wp-block-group
    > .wp-block-group__inner-container
    > .swell-block-columns:has(.poscom-pulse-button)
    > .swell-block-columns__inner
    > .swell-block-column:not(:has(.poscom-pulse-button)) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 赤CTAボタンを含む97%カラムだけを幅100%で残す */
  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3)
    > .wp-block-group
    > .wp-block-group__inner-container
    > .swell-block-columns:has(.poscom-pulse-button)
    > .swell-block-columns__inner
    > .swell-block-column:has(.poscom-pulse-button) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3)
    > .wp-block-group
    > .wp-block-group__inner-container
    > .swell-block-columns:has(.poscom-pulse-button)
    > .swell-block-columns__inner
    > .swell-block-column:has(.poscom-pulse-button)
    > .wp-block-group {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 600px) {
  .poscom-news-panel-rise
    > .swell-block-fullWide__inner
    > .swell-block-columns
    > .swell-block-columns__inner
    > .swell-block-column:nth-child(3)
    > .wp-block-group
    > .wp-block-group__inner-container
    > .swell-block-columns:has(.poscom-pulse-button) {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    margin-bottom: 8px !important;
  }
}

/* ======================================
  TOP News Estimate Banner Tablet Size
  見積りバナー：タブレットだけ少し小さく
====================================== */

@media (min-width: 601px) and (max-width: 959px) {
  .poscom-news-panel-rise .poscom-estimate-banner {
    width: min(720px, 76vw) !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .poscom-news-panel-rise .poscom-estimate-banner img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ======================================
  TOP News Red CTA Tablet Width
  赤CTAボタン：タブレットだけ少し横長にする
====================================== */

@media (min-width: 601px) and (max-width: 959px) {
  .poscom-news-panel-rise .poscom-pulse-button {
    width: min(340px, 46vw) !important;
  }
}

/* ======================================
  TOP News Service Buttons Responsive
  3サービスボタン：TAB横3列 / SP小さめ1列
====================================== */

/* タブレット：3ボタンを横並び */
@media (min-width: 601px) and (max-width: 959px) {
  /*
    3サービスボタンを直接含む内側リッチカラムだけを対象にする。
    左右の空カラムはタブレットでは不要。
  */
  .poscom-news-panel-rise
    .swell-block-columns:has(> .swell-block-columns__inner > .swell-block-column > .wp-block-group > .wp-block-group__inner-container > .poscom-side-service-btn)
    > .swell-block-columns__inner
    > .swell-block-column:not(:has(.poscom-side-service-btn)) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .poscom-news-panel-rise
    .swell-block-columns:has(> .swell-block-columns__inner > .swell-block-column > .wp-block-group > .wp-block-group__inner-container > .poscom-side-service-btn)
    > .swell-block-columns__inner
    > .swell-block-column:has(.poscom-side-service-btn) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /*
    親の wp-block-group は絶対に grid にしない。
    ここを grid にすると inner-container が1/3幅に押し込まれて崩れる。
  */
  .poscom-news-panel-rise
    .wp-block-group:has(> .wp-block-group__inner-container > .poscom-side-service-btn) {
    display: block !important;
    width: min(720px, 84vw) !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /*
    3列 grid にするのは inner-container だけ。
  */
  .poscom-news-panel-rise
    .wp-block-group:has(> .wp-block-group__inner-container > .poscom-side-service-btn)
    > .wp-block-group__inner-container,
  .poscom-news-panel-rise
    .wp-block-group__inner-container:has(> .poscom-side-service-btn) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    --the-fz: 0.86em !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link {
    min-height: 46px !important;
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link::before {
    width: 1.7rem !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link::after {
    width: 1.2rem !important;
    right: 0.7rem !important;
  }
}

/* スマホ：1列のまま小さめにする */
@media (max-width: 600px) {
  .poscom-news-panel-rise
    .swell-block-columns:has(> .swell-block-columns__inner > .swell-block-column > .wp-block-group > .wp-block-group__inner-container > .poscom-side-service-btn)
    > .swell-block-columns__inner
    > .swell-block-column:not(:has(.poscom-side-service-btn)) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .poscom-news-panel-rise
    .swell-block-columns:has(> .swell-block-columns__inner > .swell-block-column > .wp-block-group > .wp-block-group__inner-container > .poscom-side-service-btn)
    > .swell-block-columns__inner
    > .swell-block-column:has(.poscom-side-service-btn) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .poscom-news-panel-rise
    .wp-block-group:has(> .wp-block-group__inner-container > .poscom-side-service-btn),
  .poscom-news-panel-rise
    .wp-block-group__inner-container:has(> .poscom-side-service-btn) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    width: min(330px, 76vw) !important;
    max-width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    --the-fz: 0.9em !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link {
    min-height: 44px !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link::before {
    width: 2rem !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link::after {
    width: 1.35rem !important;
    right: 0.8rem !important;
  }
}

/* ======================================
  TOP News Service Buttons Text Center
  SP/TABのみ：3サービスボタンの文字を上下中央へ
====================================== */

@media (max-width: 959px) {
  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link > span,
  .poscom-news-panel-rise .poscom-side-service-btn .swell-block-button__link .swl-inline-color {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }
}

/* ======================================
  TOP Strength Horizontal Scroll
  選ばれている理由 / 提供する価値
====================================== */

.poscom-strength-horizontal {
  position: relative;
  overflow: visible;
  isolation: isolate;

  /* 本体には背景を直接つけない：水平な境界線を出さないため */
  background: transparent !important;

  margin-top: 0;
}

/* 背景レイヤー：上にはみ出して、上端を透明に溶かす */
.poscom-strength-horizontal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  /* 上のお知らせエリアへ大きめにはみ出す */
  top: clamp(-240px, -15vw, -140px);
  bottom: 0;

  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(83, 178, 187, 0.16) 0%,
      rgba(247, 250, 252, 0.96) 34%,
      rgba(247, 250, 252, 1) 100%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.04) 16%,
      rgba(0, 0, 0, 0.18) 34%,
      rgba(0, 0, 0, 0.48) 54%,
      rgba(0, 0, 0, 0.82) 74%,
      rgba(0, 0, 0, 1) 92%,
      rgba(0, 0, 0, 1) 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.04) 16%,
      rgba(0, 0, 0, 0.18) 34%,
      rgba(0, 0, 0, 0.48) 54%,
      rgba(0, 0, 0, 0.82) 74%,
      rgba(0, 0, 0, 1) 92%,
      rgba(0, 0, 0, 1) 100%
    );
}

/* 多角形の奥行き：境界線ではなく内部装飾として使う */
.poscom-strength-horizontal::after {
  content: "";
  position: absolute;
  top: clamp(-80px, -5vw, -40px);
  left: 8%;
  width: 86%;
  height: clamp(220px, 20vw, 360px);
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.5),
      rgba(83, 178, 187, 0.12)
    );

  clip-path: polygon(
    0 0,
    72% 0,
    100% 52%,
    42% 100%,
    12% 68%
  );

  opacity: 0.65;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.55) 32%,
      rgba(0, 0, 0, 1) 100%
    );
  mask-image:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.55) 32%,
      rgba(0, 0, 0, 1) 100%
    );
}

/* SWELLフルワイド内の幅制限を外す */
.poscom-strength-horizontal .swell-block-fullWide__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none !important;
  padding-left: 0;
  padding-right: 0;
}

/* H2は横スクロールさせない */
.poscom-strength-horizontal .poscom-ttl-gradient {
  position: relative;
  z-index: 4;
  max-width: 1200px;
  margin-inline: auto;
  margin-bottom: clamp(32px, 4vw, 56px);
  padding-inline: 24px;
}

/* 横に流れるトラック */
.poscom-strength-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: clamp(24px, 3vw, 48px);

  width: max-content !important;
  max-width: none !important;

  margin: 0 !important;
  padding-left: clamp(32px, 7vw, 120px);
  padding-right: clamp(32px, 7vw, 120px);

  overflow: visible;
  will-change: transform;
}

/* WordPress / SWELLのconstrainedレイアウト対策 */
.poscom-strength-track.is-layout-constrained,
.poscom-strength-track > .wp-block-group__inner-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: clamp(24px, 3vw, 48px);

  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 1枚1枚のパネル */
.poscom-strength-panel {
  flex: 0 0 min(78vw, 980px) !important;
  width: min(78vw, 980px) !important;
  max-width: none !important;

  display: grid !important;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  align-items: stretch;

  min-height: clamp(400px, 54vh, 560px);
  margin: 0 !important;

  background: #ffffff;
  border: 1px solid rgba(11, 44, 94, 0.12);
  box-shadow: 0 18px 50px rgba(6, 27, 58, 0.10);
  overflow: hidden;
}

/* SWELLカラム前提の古い指定は不要 */
.poscom-strength-panel .swell-block-columns__inner,
.poscom-strength-panel .swell-block-column {
  height: auto;
  min-height: 0;
}

/* 古い仮テキスト指定を上書き */
.poscom-strength-panel p {
  margin: 0;
}

/* 左側テキスト */
.poscom-strength-panel__text {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 100%;
  padding: clamp(22px, 2.8vw, 42px);

  background: #061b3a !important;
  color: #ffffff;
}

/* 左側の光・奥行き */
.poscom-strength-panel__text::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.10), transparent 34%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 54%);
  opacity: 0.7;
}

/* 右下の淡い装飾 */
.poscom-strength-panel__text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 36%;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(216, 236, 235, 0.22) 100%
    );
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.72;
}

.poscom-strength-panel__text-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 31em;
}

/* H3 */
.poscom-strength-heading {
  display: grid;
  gap: clamp(7px, 0.8vw, 11px);
  margin: 0 0 clamp(16px, 1.8vw, 24px) !important;
}

/* H3：番号 01 / 02 / 03 共通 */
.poscom-strength-heading__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.38em;
  padding: 0.1em 0.44em 0.06em;

  background:
    linear-gradient(
      135deg,
      #24d2d8 0%,
      #16aebc 48%,
      #087c96 100%
    ) !important;
  color: #ffffff !important;

  font-family: "Montserrat", "Arial", sans-serif;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;

  box-shadow:
    0 10px 24px rgba(0, 160, 176, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* H3：ラベル 共通 */
.poscom-strength-heading__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.46em;
  padding: 0.16em 0.32em 0.08em;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #edfafa 42%,
      #c6edf0 100%
    ) !important;
  color: #061b3a !important;

  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;

  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(83, 178, 187, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* リード文 */
.poscom-strength-lead {
  max-width: 27em;
  margin: 0 0 clamp(14px, 1.6vw, 22px) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: clamp(13px, 0.95vw, 16px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: 0.055em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

/* リスト全体 */
.poscom-strength-list {
  display: grid;
  gap: clamp(8px, 0.9vw, 14px);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 箇条書き本体 */
.poscom-strength-list li {
  display: grid;
  grid-template-columns: 1.2em 1fr;
  align-items: center;
  gap: 0.86em;

  margin: 0 !important;
  color: #ffffff !important;

  font-size: clamp(15px, 1.16vw, 20px);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: 0.035em;

  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
}

/* リストマーカー：HTMLの空spanを丸マーカー化 */
.poscom-strength-list li span {
  display: block;
  width: 0.64em;
  height: 0.64em;
  border-radius: 999px;

  background:
    linear-gradient(135deg, #24d2d8 0%, #53b2bb 100%);

  box-shadow:
    0 0 0 5px rgba(83, 178, 187, 0.17),
    0 4px 10px rgba(0, 0, 0, 0.16);
}

/* 右側画像 */
.poscom-strength-panel__visual {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: clamp(20px, 3vw, 44px);

  background:
    radial-gradient(circle at 50% 48%, rgba(83, 178, 187, 0.08), transparent 52%),
    linear-gradient(135deg, #ffffff 0%, #f5f7f8 100%);
}

.poscom-strength-panel__visual img {
  display: block;
  width: 100%;
  max-width: 580px;
  height: auto;
  max-height: clamp(280px, 46vh, 460px);

  object-fit: contain;
  object-position: center center;

  border-radius: 10px;
  box-shadow: 0 24px 48px rgba(6, 27, 58, 0.12);
}

/* カードごとの差分は背景の微差だけ。見出し番号・ラベルは共通にする */
.poscom-strength-panel--service .poscom-strength-panel__text {
  background: #061b3a !important;
}

.poscom-strength-panel--mission .poscom-strength-panel__text {
  background: #061b3a !important;
}

.poscom-strength-panel--reason .poscom-strength-panel__text {
  background: #061b3a !important;
}

/* 念のため：過去のカード別見出し色指定を打ち消して統一 */
.poscom-strength-panel--service .poscom-strength-heading__num,
.poscom-strength-panel--mission .poscom-strength-heading__num,
.poscom-strength-panel--reason .poscom-strength-heading__num {
  background:
    linear-gradient(
      135deg,
      #24d2d8 0%,
      #16aebc 48%,
      #087c96 100%
    ) !important;
  color: #ffffff !important;
}

.poscom-strength-panel--service .poscom-strength-heading__label,
.poscom-strength-panel--mission .poscom-strength-heading__label,
.poscom-strength-panel--reason .poscom-strength-heading__label {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #edfafa 42%,
      #c6edf0 100%
    ) !important;
  color: #061b3a !important;
}

/* SPでは通常の縦並びに戻す */
@media (max-width: 959px) {
  .poscom-strength-horizontal {
    margin-top: 0;
    overflow: visible;
  }

  .poscom-strength-horizontal::before,
  .poscom-strength-horizontal::after {
    display: none;
  }

  .poscom-strength-horizontal .swell-block-fullWide__inner {
    padding-left: 0;
    padding-right: 0;
  }

  .poscom-strength-track,
  .poscom-strength-track.is-layout-constrained,
  .poscom-strength-track > .wp-block-group__inner-container {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 20px;
    padding-right: 20px;
  }

  .poscom-strength-panel {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
  }

  .poscom-strength-panel__text {
    padding: 30px 22px;
  }

  .poscom-strength-panel__text::after {
    width: 45%;
    height: 24%;
  }

  .poscom-strength-heading__num {
    font-size: 26px;
  }

  .poscom-strength-heading__label {
    font-size: clamp(28px, 7.5vw, 40px);
  }

  .poscom-strength-lead {
    font-size: 14px;
    line-height: 1.75;
  }

  .poscom-strength-list {
    gap: 12px;
  }

  .poscom-strength-list li {
    grid-template-columns: 1.15em 1fr;
    font-size: 15px;
    line-height: 1.45;
  }

  .poscom-strength-list li span {
    width: 0.62em;
    height: 0.62em;
  }

  .poscom-strength-panel__visual {
    padding: 22px;
  }

  .poscom-strength-panel__visual img {
    max-width: 100%;
    max-height: none;
  }
}

/* ======================================
  TOP Release Section
  Free Your Core Business
  雑務カードが集まり、解放メッセージへつながるセクション
====================================== */

.poscom-release-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 10% 18%, rgba(83, 178, 187, 0.16), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(34, 142, 56, 0.10), transparent 30%),
    linear-gradient(135deg, #f7fafc 0%, #ffffff 52%, #edf7f8 100%) !important;
}

.poscom-release-section .swell-block-fullWide__inner {
  width: 100%;
  max-width: none !important;
}

/* GSAPで固定する舞台 */
.poscom-release-stage {
  position: relative;
  width: min(1500px, calc(100% - 48px));

  /* 下の余白を減らす */
  min-height: clamp(620px, 78vh, 760px);

  margin-inline: auto;
  overflow: visible;
}

/* タイトル */
.poscom-release-title {
  position: relative;
  z-index: 30;
  margin-inline: auto;
  margin-bottom: clamp(28px, 4vw, 56px) !important;
}

/* ======================================
  Release Card Base
====================================== */

.poscom-release-section .poscom-release-card {
  position: absolute !important;
  z-index: 5;

  width: clamp(270px, 24vw, 390px) !important;
  min-height: clamp(230px, 25vh, 315px);
  margin: 0 !important;

  border-radius: 4px;
  border: 1.9px solid rgba(6, 27, 58, 0.46);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(248, 251, 253, 0.96) 54%,
      rgba(232, 243, 247, 0.92) 100%
    );

  box-shadow:
    0 26px 62px rgba(6, 27, 58, 0.15),
    0 8px 20px rgba(83, 178, 187, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 0 0 1px rgba(6, 27, 58, 0.08);

  overflow: hidden;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* カード内の光 */
.poscom-release-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 18% 18%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.38) 26%,
      rgba(255, 255, 255, 0) 60%
    );
  opacity: 0.7;
}

/* 下の細いアクセントライン */
.poscom-release-card::after {
  content: "";
  position: absolute;
  left: clamp(24px, 2vw, 34px);
  right: clamp(24px, 2vw, 34px);
  bottom: clamp(20px, 1.7vw, 28px);
  height: 4px;
  z-index: 1;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(83, 178, 187, 0.95),
      rgba(34, 142, 56, 0.58),
      rgba(11, 44, 94, 0.34)
    );
  opacity: 0.86;
}

/* SWELLカラム内部 */
.poscom-release-card .swell-block-columns__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
}

.poscom-release-card .swell-block-column {
  position: relative;
  min-height: inherit;
  padding: clamp(22px, 2.1vw, 34px) !important;

  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
}

/* ======================================
  Card Image
  画像とH3が被らないように完全分離
====================================== */

.poscom-release-card .wp-block-image {
  position: relative;
  z-index: 2;
  margin: 0 !important;
  align-self: start;
}

.poscom-release-card .wp-block-image img {
  display: block;
  width: clamp(104px, 7.4vw, 138px) !important;
  height: clamp(104px, 7.4vw, 138px) !important;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(6, 27, 58, 0.12));
}

/* 写真系カード */
.poscom-release-card--data .wp-block-image img,
.poscom-release-card--stock .wp-block-image img {
  width: clamp(150px, 10vw, 200px) !important;
  height: clamp(88px, 6.2vw, 120px) !important;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 14px 32px rgba(6, 27, 58, 0.14);
}

/* ======================================
  Card Title
  H3は絶対配置しない。画像と被らせない。
====================================== */

.poscom-release-card h3 {
  position: relative;
  z-index: 3;

  grid-row: 3;
  align-self: end;

  margin: clamp(34px, 4vw, 72px) 0 clamp(18px, 1.8vw, 30px) !important;
  max-width: 100%;

  color: #061b3a;
  font-size: clamp(22px, 1.9vw, 32px);
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: 0.045em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* 上2枚だけ、カードを浅くしてアイコンとH3を近づける */
.poscom-release-card--shipping .swell-block-column,
.poscom-release-card--dm .swell-block-column {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: clamp(12px, 1.2vw, 18px);
  padding-block: clamp(20px, 1.8vw, 28px) !important;
}

.poscom-release-card--shipping h3,
.poscom-release-card--dm h3 {
  grid-row: auto;
  align-self: start;
  margin: 0 !important;
}

/* ======================================
  Card Color Variation
====================================== */

.poscom-release-card--shipping {
  top: clamp(90px, 13vh, 150px);
  left: clamp(40px, 7vw, 120px);
  z-index: 14;
  min-height: clamp(185px, 20vh, 245px);
  rotate: -5deg;
  background:
    linear-gradient(145deg, #ffffff 0%, #f3fbfc 52%, #e5f4f7 100%);
}

.poscom-release-card--dm {
  top: clamp(90px, 13vh, 150px);
  right: clamp(80px, 10vw, 180px);
  z-index: 14;
  min-height: clamp(185px, 20vh, 245px);
  rotate: 6deg;
  background:
    linear-gradient(145deg, #ffffff 0%, #f3f8fd 52%, #e6eff9 100%);
}

.poscom-release-card--packing {
  top: clamp(280px, 38vh, 380px);
  left: clamp(330px, 32vw, 560px);
  z-index: 12;
  rotate: 3deg;
  background:
    linear-gradient(145deg, #ffffff 0%, #f6fbf4 52%, #eaf5e6 100%);
}

.poscom-release-card--data {
  top: clamp(300px, 37vh, 405px);
  left: clamp(80px, 14vw, 240px);
  z-index: 8;
  rotate: 5deg;
  background:
    linear-gradient(145deg, #ffffff 0%, #f7fafc 52%, #e7f4f6 100%);
}

.poscom-release-card--stock {
  top: clamp(300px, 37vh, 405px);
  right: clamp(120px, 16vw, 280px);
  z-index: 8;
  rotate: -4deg;
  background:
    linear-gradient(145deg, #ffffff 0%, #f8faf5 52%, #eaf3e6 100%);
}

/* ======================================
  Final Message
  カードではなく、解放感のある最終メッセージへ
====================================== */

.poscom-release-final {
  position: absolute;
  top: 60%;
  left: 50%;
  z-index: 30 !important;

  width: min(1280px, 92vw);
  margin: 0 !important;
  padding: 0 !important;

  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #061b3a;
  text-align: center;
}

.poscom-release-final::before {
  content: "";
  position: absolute;
  inset: -90px -130px;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.48) 28%,
      rgba(83, 178, 187, 0.12) 48%,
      rgba(83, 178, 187, 0) 76%
    );
  filter: blur(10px);
}

.poscom-release-final .wp-block-group__inner-container {
  max-width: 1280px;
  margin-inline: auto;
}

/* 上の大見出し：2行に収まりやすくする */
.poscom-release-final__title {
  margin: 0 auto clamp(24px, 2.5vw, 38px) !important;
  color: #6B4A2D !important;

  font-size: clamp(28px, 3vw, 46px) !important;
  font-weight: 900 !important;
  line-height: 1.44 !important;

  letter-spacing: 0.144em !important;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 8px 24px rgba(6, 27, 58, 0.10) !important;
}

/* 説明文 */
.poscom-release-final__text {
  max-width: 820px;
  margin: 0 auto !important;

  color: rgba(6, 27, 58, 0.82) !important;
  font-size: clamp(16px, 1.55vw, 28px) !important;
  font-weight: 600 !important;
  line-height: 2.05 !important;
  letter-spacing: 0.08em !important;
  text-align: center;

  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) !important;
}


/* ======================================
  Release Final Highlight Marker
  文字の下半分にかぶるマーカー風
====================================== */

.poscom-release-final__title .release-highlight {
  position: relative;
  display: inline;
  padding-inline: 0.08em;
  color: inherit;

  background-image:
    linear-gradient(
      transparent 58%,
      rgba(216, 184, 106, 0.46) 58%,
      rgba(216, 184, 106, 0.46) 86%,
      transparent 86%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ======================================
  SP
====================================== */

@media (max-width: 959px) {
  .poscom-release-section {
    overflow: visible;
  }

  .poscom-release-stage {
    width: min(100%, calc(100% - 32px));
    min-height: auto;
  }

  .poscom-release-card,
  .poscom-release-final {
    position: relative !important;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100% !important;
    min-height: auto;
    margin: 0 0 24px !important;
    rotate: 0deg;
    translate: none;
    opacity: 1;
  }

  .poscom-release-card .swell-block-column {
    display: grid;
    grid-template-rows: auto auto;
    gap: 18px;
    padding: 26px 22px !important;
  }

  .poscom-release-card h3 {
    grid-row: auto;
    margin: 10px 0 22px !important;
    font-size: 21px;
  }

  .poscom-release-card .wp-block-image img {
    width: 76px !important;
    height: 76px !important;
  }

  .poscom-release-card--data .wp-block-image img,
  .poscom-release-card--stock .wp-block-image img {
    width: 128px !important;
    height: 82px !important;
  }

  .poscom-release-final {
    padding: 28px 22px;
    pointer-events: auto;
  }

  .poscom-release-final__title {
    font-size: 21px;
  }

  .poscom-release-final__text {
    font-size: 15px;
    line-height: 1.9;
  }

  .poscom-release-final__catch {
    font-size: 17px;
  }
}

/* ======================================
  Release Section Viewport Fit Adjust
  pin中の余白と見切れを調整
====================================== */

@media (min-width: 960px) {
  .poscom-release-stage {
    height: auto;
    min-height: clamp(560px, 70vh, 680px);
    max-height: none;
  }

  .poscom-release-card--shipping {
    top: clamp(90px, 13vh, 150px);
  }

  .poscom-release-card--dm {
    top: clamp(90px, 13vh, 150px);
  }

  .poscom-release-card--packing {
    top: clamp(230px, 30vh, 320px);
  }

  .poscom-release-card--data {
    top: clamp(300px, 37vh, 405px);
  }

  .poscom-release-card--stock {
    top: clamp(300px, 37vh, 405px);
  }

  /* 最終メッセージはここで統一。ここ以外で top を指定しない */
  .poscom-release-final {
    top: 60%;
    left: 50%;
    right: auto;
    bottom: auto;
    translate: -50% -50%;
  }
}

/* ======================================
  Release Section Title Position Adjust
====================================== */

@media (min-width: 960px) {
  .poscom-release-title {
    transform: translateY(-34px);
    margin-bottom: clamp(8px, 1.5vw, 22px) !important;
  }
}

/* ======================================
  Release Logo Core
  POS-COMに業務が集まる受け皿
====================================== */

@media (min-width: 960px) {
  .poscom-release-logo-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;

    width: min(520px, 36vw);
    margin: 0 !important;

    translate: -50% -50%;
    opacity: 0;
    scale: 0.86;
    pointer-events: none;

    padding: clamp(10px, 1.2vw, 18px);
    border-radius: 28px;

    background:
      linear-gradient(
        135deg,
        rgba(232, 248, 250, 0.36) 0%,
        rgba(255, 255, 255, 0.48) 52%,
        rgba(224, 243, 238, 0.32) 100%
      );

    border: 1px solid rgba(83, 178, 187, 0.16);

    box-shadow:
      0 24px 70px rgba(6, 27, 58, 0.10),
      0 0 36px rgba(83, 178, 187, 0.10);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .poscom-release-logo-core::before {
    content: none;
  }

  .poscom-release-logo-core img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: 22px;

    filter:
      drop-shadow(0 16px 34px rgba(6, 27, 58, 0.14))
      drop-shadow(0 0 18px rgba(83, 178, 187, 0.10));
  }
}

/* ======================================
  Release Low Height PC Fit
  Fit the PC release sequence on short viewports
====================================== */

@media (min-width: 960px) and (max-height: 760px) {
  .poscom-release-section .poscom-release-card--packing {
    top: clamp(220px, 29vh, 300px) !important;
  }

  .poscom-release-section .poscom-release-card--data,
  .poscom-release-section .poscom-release-card--stock {
    top: clamp(286px, 35vh, 350px) !important;
  }
}

@media (min-width: 960px) and (max-height: 700px) {
  .poscom-release-section .poscom-release-card {
    width: clamp(262px, 23vw, 360px) !important;
    height: clamp(218px, 34vh, 246px) !important;
    min-height: 0 !important;
  }

  .poscom-release-section .poscom-release-card .swell-block-columns__inner,
  .poscom-release-section .poscom-release-card .swell-block-column {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  .poscom-release-section .poscom-release-card .swell-block-column {
    padding: clamp(18px, 1.7vw, 28px) !important;
  }

  .poscom-release-section .poscom-release-card h3 {
    margin: clamp(24px, 2.6vw, 42px) 0 clamp(12px, 1.4vw, 22px) !important;
    font-size: clamp(20px, 1.65vw, 28px) !important;
    line-height: 1.28 !important;
  }

  .poscom-release-section .poscom-release-card--packing {
    top: clamp(208px, 28vh, 275px) !important;
  }

  .poscom-release-section .poscom-release-card--data,
  .poscom-release-section .poscom-release-card--stock {
    top: clamp(266px, 34vh, 312px) !important;
  }
}

@media (min-width: 960px) and (max-height: 680px) {
  .poscom-release-section .poscom-release-card {
    width: clamp(246px, 21vw, 320px) !important;
    height: clamp(196px, 32vh, 216px) !important;
    min-height: 0 !important;
  }

  .poscom-release-section .poscom-release-card .swell-block-columns__inner,
  .poscom-release-section .poscom-release-card .swell-block-column {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  .poscom-release-section .poscom-release-card .swell-block-column {
    padding: clamp(15px, 1.35vw, 24px) !important;
  }

  .poscom-release-section .poscom-release-card .wp-block-image img {
    width: clamp(86px, 6.2vw, 112px) !important;
    height: clamp(86px, 6.2vw, 112px) !important;
  }

  .poscom-release-section .poscom-release-card--data .wp-block-image img,
  .poscom-release-section .poscom-release-card--stock .wp-block-image img {
    width: clamp(122px, 8.6vw, 160px) !important;
    height: clamp(70px, 5.1vw, 92px) !important;
    border-radius: 14px !important;
  }

  .poscom-release-section .poscom-release-card h3 {
    margin: clamp(16px, 2vw, 30px) 0 clamp(10px, 1vw, 18px) !important;
    font-size: clamp(19px, 1.45vw, 25px) !important;
    line-height: 1.24 !important;
  }

  .poscom-release-section .poscom-release-card--shipping,
  .poscom-release-section .poscom-release-card--dm {
    height: clamp(172px, 27vh, 198px) !important;
    min-height: 0 !important;
  }

  .poscom-release-section .poscom-release-card--shipping .swell-block-column,
  .poscom-release-section .poscom-release-card--dm .swell-block-column {
    row-gap: clamp(9px, 1vw, 14px) !important;
    padding-block: clamp(15px, 1.4vw, 22px) !important;
  }

  .poscom-release-section .poscom-release-card--packing {
    top: clamp(190px, 26vh, 245px) !important;
  }

  .poscom-release-section .poscom-release-card--data,
  .poscom-release-section .poscom-release-card--stock {
    top: clamp(238px, 31vh, 282px) !important;
  }

  .poscom-release-section .poscom-release-logo-core {
    width: min(500px, 34vw) !important;
  }
}

@media (min-width: 960px) and (max-height: 620px) {
  .poscom-release-section .poscom-release-card {
    width: clamp(232px, 19.5vw, 292px) !important;
    height: clamp(176px, 30vh, 196px) !important;
    min-height: 0 !important;
  }

  .poscom-release-section .poscom-release-card .swell-block-columns__inner,
  .poscom-release-section .poscom-release-card .swell-block-column {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }

  .poscom-release-section .poscom-release-card .swell-block-column {
    padding: clamp(12px, 1.15vw, 20px) !important;
  }

  .poscom-release-section .poscom-release-card .wp-block-image img {
    width: clamp(76px, 5.4vw, 98px) !important;
    height: clamp(76px, 5.4vw, 98px) !important;
  }

  .poscom-release-section .poscom-release-card--data .wp-block-image img,
  .poscom-release-section .poscom-release-card--stock .wp-block-image img {
    width: clamp(108px, 7.8vw, 142px) !important;
    height: clamp(62px, 4.6vw, 82px) !important;
    border-radius: 12px !important;
  }

  .poscom-release-section .poscom-release-card h3 {
    margin: clamp(10px, 1.5vw, 22px) 0 clamp(7px, 0.8vw, 12px) !important;
    font-size: clamp(18px, 1.34vw, 23px) !important;
    line-height: 1.20 !important;
  }

  .poscom-release-section .poscom-release-card--shipping,
  .poscom-release-section .poscom-release-card--dm {
    height: clamp(160px, 26vh, 184px) !important;
    min-height: 0 !important;
  }

  .poscom-release-section .poscom-release-card--packing {
    top: clamp(170px, 24vh, 215px) !important;
  }

  .poscom-release-section .poscom-release-card--data,
  .poscom-release-section .poscom-release-card--stock {
    top: clamp(210px, 28vh, 245px) !important;
  }

  .poscom-release-section .poscom-release-logo-core {
    width: min(460px, 32vw) !important;
  }
}

/* ======================================
  Release Final Catch Shine
  文字本体を壊さない光の帯だけの演出
====================================== */

.poscom-release-final__catch {
  position: relative;
  display: inline-block;
  overflow: hidden;

  color: #061b3a !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 1),
    1px 0 0 rgba(255, 255, 255, 0.96),
    -1px 0 0 rgba(255, 255, 255, 0.96),
    0 -1px 0 rgba(255, 255, 255, 0.96),
    0 4px 14px rgba(6, 27, 58, 0.22),
    0 18px 44px rgba(83, 178, 187, 0.20) !important;
}

/* 光の帯。文字色は変えない */
.poscom-release-final__catch::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -35%;
  width: 26%;
  height: 150%;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 24%,
      rgba(255, 255, 255, 0.82) 46%,
      rgba(255, 241, 168, 0.78) 53%,
      rgba(139, 230, 255, 0.58) 60%,
      rgba(255, 255, 255, 0.9) 66%,
      rgba(255, 255, 255, 0) 100%
    );

  transform: translateX(-260%) skewX(-18deg);
  opacity: 0;
}

.poscom-release-final.is-active .poscom-release-final__catch::after {
  animation: poscomCatchShineBar 1.15s ease-out 0.28s 1 both;
}

@keyframes poscomCatchShineBar {
  0% {
    transform: translateX(-260%) skewX(-18deg);
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  65% {
    opacity: 1;
  }

  100% {
    transform: translateX(620%) skewX(-18deg);
    opacity: 0;
  }
}

/* ======================================
  Contact Method Cards
  TEL / Mail 横並びカード
====================================== */

.contact-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 36px);

  /* 下のブロックと同じくらい横幅を使う */
  width: min(76vw, 1080px);
  max-width: none;
  margin-top: clamp(32px, 4vw, 56px);
  margin-right: 0;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* 1カード */
.contact-method-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

/* 3D画像 + 見出し */
.contact-method-card__head {
  display: grid;
  grid-template-columns: clamp(96px, 8.5vw, 150px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  margin-bottom: clamp(18px, 2vw, 28px);
}

/* 見出し */
.contact-method-card__title {
  margin: 0 !important;
}

/* 紺背景ボックス */
.contact-method-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: clamp(150px, 12vw, 190px);
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3vw, 42px);

  background: #061b3a;
  color: #ffffff;
  text-align: center;
}

/* 小さい説明 */
.contact-method-card__lead {
  margin: 0 0 0.9em !important;
  color: #ffffff;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
}

/* 電話番号・メールアドレス */
.contact-method-card__main {
  margin: 0 !important;
  color: #ffffff;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(34px, 3.1vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.08em;
}

/* Mailだけ横幅内で収める */
.contact-method-card__main--mail {
  font-size: clamp(24px, 2.25vw, 34px);
  letter-spacing: 0.045em;
  white-space: nowrap;
  word-break: normal;
}

/* 補足 */
.contact-method-card__note {
  margin: 0.75em 0 0 !important;
  color: #ffffff;
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.08em;
}

/* 3Dオブジェクト */
.contact-method-card .contact-3d-object {
  width: clamp(104px, 9.25vw, 160px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

/* タブレット以下 */
@media (max-width: 959px) {
  .contact-method-grid {
    width: min(92vw, 760px);
    grid-template-columns: 1fr;
    gap: 38px;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }

  .contact-method-card__head {
    grid-template-columns: clamp(86px, 24vw, 130px) minmax(0, 1fr);
    gap: 18px;
  }

  .contact-method-card__body {
    min-height: 150px;
  }

  .contact-method-card__main {
    font-size: clamp(30px, 8vw, 42px);
  }

  .contact-method-card__main--mail {
    font-size: clamp(21px, 5.8vw, 30px);
    white-space: normal;
    word-break: break-all;
  }
}

/* ======================================
  Contact Mail Note Spacing
  メールアドレス下の補足文間隔調整
====================================== */

/* Mailカードだけ：メールアドレスと補足文の間を少し空ける */
.contact-method-card--mail .contact-method-card__main--mail {
  margin-bottom: clamp(20px, 1.38vw, 28px) !important;
}

/* Mailカードだけ：補足文2行を詰める */
.contact-method-card--mail .contact-method-card__note {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.45;
}

/* 補足文同士の距離をさらに詰める */
.contact-method-card--mail .contact-method-card__note + .contact-method-card__note {
  margin-top: 0.15em !important;
}

/* ======================================
  Contact Mail Link
  Front Page / Font Awesome 擬似要素版
====================================== */

.contact-method-card--mail .contact-method-card__mail-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.36em !important;

  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: inherit !important;

  transition:
    color 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-method-card--mail .contact-method-card__mail-text {
  display: inline-block !important;
  line-height: 1 !important;
}

/* Font Awesome 外部リンクアイコン */
.contact-method-card--mail .contact-method-card__mail-link::after {
  content: "\f35d" !important;

  display: inline-block !important;
  flex: 0 0 auto !important;

  font-family:
    "Font Awesome 6 Free",
    "Font Awesome 5 Free",
    "FontAwesome" !important;
  font-weight: 900 !important;

  font-size: 0.66em !important;
  line-height: 1 !important;

  color: currentColor !important;
  opacity: 0.95 !important;

  transform: translateY(0em) !important;

  transition:
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ホバー時：アドレスとアイコンをまとめて右上へ */
.contact-method-card--mail .contact-method-card__mail-link:hover {
  color: #16c6d3 !important;
  transform: translate(0.16em, -0.1em) !important;
}

.contact-method-card--mail .contact-method-card__mail-link:hover::after {
  opacity: 1 !important;
}


/* ======================================
  Contact Tel Icon
  Front Page / 指定SVG画像版
====================================== */

.contact-method-card--tel .contact-method-card__main--tel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.34em !important;

  color: #ffffff !important;
  line-height: 1 !important;
}

.contact-method-card--tel .contact-method-card__tel-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.contact-method-card--tel .contact-method-card__tel-link:visited,
.contact-method-card--tel .contact-method-card__tel-link:hover,
.contact-method-card--tel .contact-method-card__tel-link:focus,
.contact-method-card--tel .contact-method-card__tel-link:active {
  color: inherit !important;
  text-decoration: none !important;
}

.contact-method-card--tel .contact-method-card__tel-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 0.92em !important;
  height: 0.92em !important;
  flex: 0 0 0.92em !important;

  transform: translateY(0.07em) !important;
}

.contact-method-card--tel .contact-method-card__tel-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.contact-method-card--tel .contact-method-card__tel-text {
  display: inline-block !important;
  line-height: 1 !important;
}


/* ======================================
  SP
====================================== */

@media (max-width: 959px) {
  .contact-method-card--mail .contact-method-card__mail-link {
    gap: 0.28em !important;
  }

  .contact-method-card--mail .contact-method-card__mail-link::after {
    font-size: 0.58em !important;
    transform: translateY(-0.03em) !important;
  }

  .contact-method-card--mail .contact-method-card__mail-link:hover {
    transform: translate(0.1em, -0.06em) !important;
  }

  .contact-method-card--tel .contact-method-card__main--tel {
    gap: 0.28em !important;
  }

  .contact-method-card--tel .contact-method-card__tel-icon {
    width: 0.84em !important;
    height: 0.84em !important;
    flex-basis: 0.84em !important;
    transform: translateY(0.06em) !important;
  }
}

/* ======================================
  TOP Release Final
  ロゴ吸収後：大画像 → 大コピー
====================================== */

.poscom-release-final {
  position: absolute !important;
  z-index: 28;
  top: clamp(150px, 22vh, 220px);
  left: 50%;
  translate: -50% 0;

  display: grid;
  place-items: center;
  width: min(1240px, calc(100% - 48px)) !important;
  min-height: clamp(380px, 52vh, 560px);
  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* 新しく出す大きめ画像 */
.poscom-release-final__image-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;

  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 画像の後ろに背景なじませ用の淡い光 */
.poscom-release-final__image-wrap::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.58) 44%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 50% 50%, rgba(83, 178, 187, 0.16), transparent 64%);
  filter: blur(20px);
}

.poscom-release-final__image {
  display: block;
  width: min(1040px, 84vw);
  max-height: min(500px, 52vh);
  height: auto;

  object-fit: contain;
  object-position: center;
  border-radius: 0;
  box-shadow: none;

  /*
    画像の上下左右の端をCSSでぼかして背景になじませる。
    実画像は加工しない。
  */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-composite: intersect;

  filter:
    drop-shadow(0 30px 62px rgba(6, 27, 58, 0.12))
    saturate(1.03)
    contrast(1.02);
}

/* ======================================
  TOP Release Before / After
  .poscom-release-final 内のabsoluteレイヤーとして表示
====================================== */

.poscom-release-beforeafter {
  position: absolute;
  inset: 0;
  z-index: 3;

  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
  color: #061b3a;
  pointer-events: none;
}

.poscom-release-beforeafter__inner {
  position: relative;
}

/* HTMLにinnerがない場合でも既存HTMLのまま成立させる */
.poscom-release-beforeafter__head,
.poscom-release-beforeafter__stage {
  position: relative;
  z-index: 2;
}

.poscom-release-beforeafter__head {
  position: absolute;
  top: clamp(-174px, -12vh, -108px);
  left: 50%;
  translate: -50% 0;
  width: min(980px, 88vw);
  text-align: center;
}

.poscom-release-beforeafter__eyebrow {
  display: none;
}

.poscom-release-beforeafter__lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 4.8vh, 62px);
  margin: 0 !important;
  padding: 0 clamp(24px, 2.4vw, 38px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, #061b3a 0%, #0b2c5e 72%, #0d3f7a 100%);
  color: #ffffff !important;
  font-size: clamp(30px, 2.35vw, 42px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.04em;
  box-shadow:
    0 18px 40px rgba(6, 27, 58, 0.18),
    0 0 28px rgba(22, 198, 211, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.18);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  white-space: nowrap;
}

.poscom-release-beforeafter__stage {
  width: min(1180px, 88vw);
  height: clamp(340px, 42vh, 470px);

  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(120px, 170px) minmax(0, 0.88fr);
  align-items: center;
  gap: clamp(16px, 2vw, 30px);

  position: absolute;
  top: 46%;
  left: 50%;
  translate: -50% -50%;
}

.poscom-release-beforeafter__before,
.poscom-release-beforeafter__after {
  position: relative;
  min-width: 0;
  height: 100%;
}

.poscom-release-beforeafter__label {
  position: absolute;
  top: -62px;
  margin: 0 !important;

  color: rgba(6, 27, 58, 0.78);
  font-family: inherit;
  font-size: clamp(20px, 1.45vw, 28px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-align: center;
  white-space: nowrap;
}

.poscom-release-beforeafter__before .poscom-release-beforeafter__label {
  left: 44%;
  translate: -50% 0;
}

.poscom-release-beforeafter__after .poscom-release-beforeafter__label {
  left: 50%;
  translate: -50% 0;
}

.poscom-release-beforeafter__pile {
  position: absolute;
  inset: 16px 0 0;
  filter: drop-shadow(0 22px 42px rgba(6, 27, 58, 0.12));
}

.poscom-release-beforeafter__task {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: clamp(110px, 8vw, 142px);
  min-height: clamp(38px, 4vh, 52px);
  padding: 0 15px;

  border: 1px solid rgba(6, 27, 58, 0.16);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  color: #061b3a;

  font-size: clamp(12px, 0.84vw, 14px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0.04em;
  white-space: nowrap;

  box-shadow:
    0 13px 30px rgba(6, 27, 58, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--z);
  transform:
    translate(calc(-50% + var(--x)), calc(-50% + var(--y)))
    rotate(var(--r));
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(1) {
  z-index: 1;
  transform: translate(-306px, 78px) rotate(-13deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(2) {
  z-index: 2;
  transform: translate(-258px, 50px) rotate(9deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(3) {
  z-index: 3;
  transform: translate(-286px, 14px) rotate(-7deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(4) {
  z-index: 4;
  transform: translate(-218px, 22px) rotate(13deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(5) {
  z-index: 5;
  transform: translate(-178px, 56px) rotate(-10deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(6) {
  z-index: 6;
  transform: translate(-136px, 28px) rotate(7deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(7) {
  z-index: 7;
  transform: translate(-242px, -18px) rotate(-14deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(8) {
  z-index: 8;
  transform: translate(-188px, -12px) rotate(10deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(9) {
  z-index: 9;
  transform: translate(-128px, -4px) rotate(-8deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(10) {
  z-index: 10;
  transform: translate(-80px, -32px) rotate(12deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(11) {
  z-index: 11;
  transform: translate(-32px, -8px) rotate(-9deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(12) {
  z-index: 12;
  transform: translate(22px, -38px) rotate(8deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(13) {
  z-index: 13;
  transform: translate(-162px, -56px) rotate(-12deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(14) {
  z-index: 14;
  transform: translate(-94px, -68px) rotate(9deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(15) {
  z-index: 15;
  transform: translate(-36px, -62px) rotate(-6deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(16) {
  z-index: 16;
  transform: translate(30px, -88px) rotate(13deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(17) {
  z-index: 17;
  transform: translate(88px, -58px) rotate(-11deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(18) {
  z-index: 18;
  transform: translate(136px, -96px) rotate(9deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(19) {
  z-index: 19;
  transform: translate(-112px, -108px) rotate(-14deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(20) {
  z-index: 20;
  transform: translate(-54px, -124px) rotate(7deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(21) {
  z-index: 21;
  transform: translate(6px, -138px) rotate(-9deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(22) {
  z-index: 22;
  transform: translate(64px, -156px) rotate(12deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(23) {
  z-index: 23;
  transform: translate(120px, -134px) rotate(-7deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(24) {
  z-index: 24;
  transform: translate(172px, -166px) rotate(10deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(25) {
  z-index: 25;
  transform: translate(-34px, -180px) rotate(-12deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(26) {
  z-index: 26;
  transform: translate(28px, -202px) rotate(8deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(27) {
  z-index: 27;
  transform: translate(92px, -192px) rotate(-9deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(28) {
  z-index: 28;
  transform: translate(156px, -226px) rotate(11deg);
}

/* 手前のカード：濃く、さらに山の前面へ */
.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(29) {
  z-index: 40;
  transform: translate(-250px, 104px) rotate(7deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(30) {
  z-index: 41;
  transform: translate(-190px, 78px) rotate(-8deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(31) {
  z-index: 42;
  transform: translate(-130px, 100px) rotate(5deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(32) {
  z-index: 43;
  transform: translate(-72px, 68px) rotate(-6deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(33) {
  z-index: 44;
  transform: translate(-12px, 90px) rotate(9deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(34) {
  z-index: 45;
  transform: translate(48px, 56px) rotate(-8deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(35) {
  z-index: 46;
  transform: translate(108px, 74px) rotate(6deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(36) {
  z-index: 47;
  transform: translate(168px, 38px) rotate(-7deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(37) {
  z-index: 48;
  transform: translate(-160px, 136px) rotate(-5deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(38) {
  z-index: 49;
  transform: translate(-92px, 132px) rotate(8deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(39) {
  z-index: 50;
  transform: translate(-24px, 122px) rotate(-9deg);
}

.poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(40) {
  z-index: 51;
  transform: translate(44px, 108px) rotate(6deg);
}

/* 奥のカード：薄く、積み上がりの奥行き */
.poscom-release-beforeafter__pile .task--back {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.99) 0%, rgba(236,248,250,0.985) 100%);
  color: #061b3a;
  border-color: rgba(11, 44, 94, 0.18);
  box-shadow:
    0 14px 28px rgba(6, 27, 58, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.88);
  opacity: 1;
}

/* 手前のカード：濃く、抱え込み感 */
.poscom-release-beforeafter__pile .task--front {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.995) 0%, rgba(236,248,250,0.99) 100%);
  color: #061b3a;
  border-color: rgba(11, 44, 94, 0.22);
  box-shadow:
    0 18px 36px rgba(6, 27, 58, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.9);
  opacity: 1;
}

.poscom-release-beforeafter__bridge {
  position: relative;
  top: -10px;
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 13px;
  min-width: 0;
}

.poscom-release-beforeafter__bridge-line {
  display: block;
  width: 100%;
  height: 2px;
  background:
    linear-gradient(90deg, rgba(22,198,211,0.10) 0%, #16c6d3 42%, #0b2c5e 100%);
  box-shadow:
    0 0 18px rgba(22,198,211,0.26),
    0 0 36px rgba(22,198,211,0.12);
}

.poscom-release-beforeafter__bridge-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(22,174,188,0.24);
  border-radius: 999px;

  background:
    linear-gradient(135deg, #ffffff 0%, #eefafa 48%, #d9f7f9 100%);
  color: #0b2c5e;

  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  white-space: nowrap;

  box-shadow:
    0 12px 28px rgba(6,27,58,0.09),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.poscom-release-beforeafter__bridge-arrow {
  position: relative;
  display: block;
  width: min(90px, 100%);
  height: 16px;
}

.poscom-release-beforeafter__bridge-arrow::before,
.poscom-release-beforeafter__bridge-arrow::after {
  content: "";
  position: absolute;
}

.poscom-release-beforeafter__bridge-arrow::before {
  top: 7px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #16c6d3 0%, #0b2c5e 100%);
}

.poscom-release-beforeafter__bridge-arrow::after {
  top: 2px;
  right: 1px;
  width: 12px;
  height: 12px;
  border-top: 2px solid #0b2c5e;
  border-right: 2px solid #0b2c5e;
  transform: rotate(45deg);
}

.poscom-release-beforeafter__after-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -52%;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 16px);

  width: min(430px, 100%);
}

.poscom-release-beforeafter__task--after {
  min-width: 0;
  width: 100%;
  min-height: clamp(56px, 6vh, 72px);
  font-size: clamp(15px, 1.05vw, 18px);

  background:
    linear-gradient(135deg, #061b3a 0%, #0b2c5e 100%);
  color: #ffffff;
  border-color: rgba(255,255,255,0.15);

  box-shadow:
    0 16px 34px rgba(6,27,58,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* 低いノートPCでは全体を少し小さくして、下がり崩れを防ぐ */
@media (min-width: 960px) and (max-height: 760px) {
  .poscom-release-beforeafter__head {
    top: clamp(-130px, -9.6vh, -76px) !important;
  }

  .poscom-release-beforeafter__lead {
    min-height: 46px;
    padding-inline: 22px;
    font-size: clamp(24px, 1.9vw, 34px);
  }

  .poscom-release-section .poscom-release-beforeafter__label {
    font-size: clamp(17px, 1.2vw, 22px);
    top: -24px !important;
  }

  .poscom-release-beforeafter__stage {
    height: 320px;
    top: 44%;
  }

  .poscom-release-beforeafter__pile {
    inset: 6px 0 0;
  }

  .poscom-release-beforeafter__bridge {
    top: -8px;
  }

  .poscom-release-beforeafter__task {
    min-height: 38px;
    font-size: 12px;
  }

  .poscom-release-beforeafter__task--after {
    font-size: clamp(13px, 1vw, 16px);
  }

  .poscom-release-beforeafter__after-grid {
    translate: -50% -54%;
  }
}

/* Keep the before/after labels clear on short PC viewports */
@media (min-width: 960px) and (max-height: 700px) {
  .poscom-release-section .poscom-release-beforeafter__head {
    top: clamp(-116px, -8.8vh, -68px) !important;
  }

  .poscom-release-section .poscom-release-beforeafter__label {
    top: -18px !important;
  }

  .poscom-release-section .poscom-release-beforeafter__stage {
    top: 46% !important;
  }
}

@media (min-width: 960px) and (max-height: 680px) {
  .poscom-release-section .poscom-release-beforeafter__head {
    top: -58px !important;
  }

  .poscom-release-section .poscom-release-beforeafter__label {
    top: -8px !important;
  }

  .poscom-release-section .poscom-release-beforeafter__stage {
    top: 50% !important;
  }
}

@media (min-width: 960px) and (max-height: 620px) {
  .poscom-release-section .poscom-release-beforeafter__head {
    top: -52px !important;
  }

  .poscom-release-section .poscom-release-beforeafter__label {
    top: 0 !important;
  }

  .poscom-release-section .poscom-release-beforeafter__stage {
    top: 52% !important;
  }
}

/* SPではGSAPが動かないため、absoluteを解除して自然表示 */
@media (max-width: 959px) {
  .poscom-release-beforeafter {
    position: relative;
    inset: auto;
    display: block;
    width: min(100%, calc(100vw - 32px));
    height: auto;
    margin: 32px auto;
    padding: 0;
    pointer-events: auto;
  }

  .poscom-release-beforeafter__head {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    width: 100%;
    margin-bottom: 22px;
  }

  .poscom-release-beforeafter__lead {
    width: 100%;
    min-height: 0;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: clamp(21px, 6vw, 30px);
    white-space: normal;
  }

  .poscom-release-beforeafter__stage {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    display: block;
    width: 100%;
    height: auto;
  }

  .poscom-release-beforeafter__before,
  .poscom-release-beforeafter__after {
    height: auto;
  }

  .poscom-release-beforeafter__label {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    margin-bottom: 14px !important;
  }

  .poscom-release-beforeafter__pile {
    position: relative;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    filter: none;
  }

  .poscom-release-beforeafter__pile .poscom-release-beforeafter__task {
    position: static;
    transform: none;
  }

  .poscom-release-beforeafter__pile .poscom-release-beforeafter__task:nth-child(n) {
    transform: none;
  }

  .poscom-release-beforeafter__bridge {
    top: auto;
    margin: 24px auto;
  }

  .poscom-release-beforeafter__bridge-line {
    width: min(280px, 100%);
  }

  .poscom-release-beforeafter__after-grid {
    position: relative;
    top: auto;
    left: auto;
    translate: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 0 auto;
  }
}

/* 最後に出す2行コピー */
.poscom-release-final__copy {
  position: relative;
  inset: auto;
  z-index: 2;

  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
  pointer-events: none;
}

.poscom-release-final__copy-text {
  position: relative;
  display: inline-block;
  margin: 0 !important;
  padding: 0;

  color: #061b3a !important;
  font-size: clamp(48px, 5.7vw, 98px) !important;
  font-weight: 900 !important;
  line-height: 1.24 !important;
  letter-spacing: 0.02em !important;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 44px rgba(83, 178, 187, 0.14);
}

/* コピー下の上品な光 */
.poscom-release-final__copy-text::before,
.poscom-release-final__copy-text::after {
  content: none !important;
}

.poscom-release-final__copy-text .release-line {
  position: relative;
  display: inline-block;
  padding-bottom: 0.1em;
}

.poscom-release-final__copy-text .release-line::after {
  content: "";
  position: absolute;
  left: 0.04em;
  right: 0.04em;
  bottom: 0.015em;
  height: 0.14em;
  background: #1ed9d2;
  opacity: 1;
  border-radius: 0;
}

.poscom-release-final.is-active .poscom-release-final__copy-text {
  animation: none;
}

/* 低いノートPC対策 */
@media (min-width: 960px) and (max-height: 760px) {
  .poscom-release-final {
    top: clamp(120px, 19vh, 170px);
    min-height: clamp(330px, 46vh, 430px);
  }

  .poscom-release-final__image {
    width: min(900px, 78vw);
    max-height: 380px;
  }

  .poscom-release-final__copy-text {
    font-size: clamp(42px, 4.6vw, 74px) !important;
    line-height: 1.20 !important;
  }
}

@media (min-width: 960px) and (max-height: 680px) {
  .poscom-release-final {
    top: clamp(96px, 17vh, 135px);
    min-height: 320px;
  }

  .poscom-release-final__image {
    width: min(780px, 72vw);
    max-height: 310px;
  }

  .poscom-release-final__copy-text {
    font-size: clamp(36px, 4vw, 60px) !important;
  }
}

/* SPではGSAPを動かさないため自然表示 */
@media (max-width: 959px) {
  .poscom-release-final {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    translate: none !important;

    display: block;
    width: 100% !important;
    min-height: auto;
    padding: 36px 18px 52px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .poscom-release-final__image-wrap,
  .poscom-release-final__copy {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }

  .poscom-release-final__image-wrap {
    margin-bottom: 34px;
  }

  .poscom-release-final__image {
    width: 100%;
    max-height: none;
  }

  .poscom-release-final__copy-text {
    font-size: clamp(30px, 8vw, 46px) !important;
    line-height: 1.20 !important;
    letter-spacing: 0.04em !important;
  }
}

@media (max-width: 767px) {
  .poscom-release-final__copy-text {
    font-size: clamp(30px, 9vw, 50px) !important;
    line-height: 1.20 !important;
  }

  .poscom-release-final__copy-text .release-line {
    padding-bottom: 0.10em;
  }

  .poscom-release-final__copy-text .release-line::after {
    height: 0.12em;
  }
}

.poscom-release-final__image {
  width: min(1120px, 86vw);
  max-height: min(540px, 58vh);
}

/* ======================================
  TOP Service Cards
  3事業版：PCは重ねず3カラム表示
====================================== */

.poscom-top-service-cards {
  width: min(80vw, 1140px);
  max-width: none;
  margin-top: clamp(72px, 8vw, 120px);
  margin-bottom: clamp(88px, 9vw, 140px);
  margin-left: 50%;
  transform: translateX(-50%);
}

/* カードリスト本体 */
.poscom-top-service-cards .company-cardlist {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-height: clamp(390px, 30vw, 470px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(6, 27, 58, 0.18);
}

/* 各カード共通 */
.poscom-top-service-cards .company-cardlist__item {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: clamp(390px, 30vw, 470px);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  color: #061b3a;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.96);
  border-left: 1px solid rgba(6, 27, 58, 0.18);
  transition:
    color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.poscom-top-service-cards .company-cardlist__item:first-child {
  border-left: 0;
}

/* ホバーしたカードは前面へ */
.poscom-top-service-cards .company-cardlist__item:hover {
  z-index: 20;
  transform: translateY(-3px);
  box-shadow:
    0 22px 54px rgba(6, 27, 58, 0.15),
    0 8px 18px rgba(6, 27, 58, 0.10);
}

/* ======================================
  TOP Service Card Images
====================================== */

.poscom-top-service-cards .company-cardlist__item--shipping .company-cardlist__image {
  background-image: url("/wp-content/uploads/2026/06/service-01.jpg");
}

.poscom-top-service-cards .company-cardlist__item--dm .company-cardlist__image {
  background-image: url("/wp-content/uploads/2026/06/service-02.jpg");
}

.poscom-top-service-cards .company-cardlist__item--print .company-cardlist__image {
  background-image: url("/wp-content/uploads/2026/06/service-03.jpg");
}

/* 通常時：3枚カード用の横長サムネイル */
.poscom-top-service-cards .company-cardlist__image {
  position: absolute;
  z-index: 0;
  top: 52%;
  left: 50%;
  width: min(68%, 280px);
  max-width: calc(100% - 56px);
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  background-color: #dfe8ed;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  transition:
    top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    right 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.35s ease,
    opacity 0.35s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* hover時：画像をカード全面へ完全展開 */
.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__image {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  opacity: 1;
  filter: none;
  background-size: cover;
  background-position: center center;
  transform: translate(0, 0) scale(1.04);
}

/* 暗幕 */
.poscom-top-service-cards .company-cardlist__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(3, 13, 32, 0.76) 0%,
      rgba(3, 13, 32, 0.58) 42%,
      rgba(3, 13, 32, 0.90) 100%
    );
  transition: opacity 0.35s ease;
}

.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__shade {
  opacity: 1;
}

/* 中身 */
.poscom-top-service-cards .company-cardlist__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: clamp(390px, 30vw, 470px);
  padding: clamp(32px, 3vw, 42px);
}

.poscom-top-service-cards .company-cardlist__service {
  display: block;
  color: rgba(6, 27, 58, 0.42);
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.22em;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

.poscom-top-service-cards .company-cardlist__title {
  display: block;
  margin-top: 18px;
  color: #061b3a;
  font-size: clamp(24px, 1.75vw, 31px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.06em;
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

.poscom-top-service-cards .company-cardlist__text {
  display: block;
  margin-top: auto;
  margin-bottom: clamp(42px, 4vw, 56px);
  color: #061b3a;
  font-size: clamp(14px, 0.95vw, 17px);
  font-weight: 800;
  line-height: 1.9;
  letter-spacing: 0.035em;
  opacity: 0;
  transform: translateY(10px);
  transition:
    color 0.35s ease,
    opacity 0.35s ease,
    transform 0.35s ease,
    text-shadow 0.35s ease;
}

/* VIEWボタン */
.poscom-top-service-cards .company-cardlist__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  color: #061b3a;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  transition:
    color 0.35s ease,
    transform 0.35s ease,
    text-shadow 0.35s ease;
}

.poscom-top-service-cards .company-cardlist__buttonIcon {
  --icon-bg: #061b3a;
  --icon-fg: #ffffff;

  position: relative;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  overflow: hidden;
  color: var(--icon-fg);
  background: var(--icon-bg);
  border-radius: 999px;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

.poscom-top-service-cards .company-cardlist__buttonIcon::before,
.poscom-top-service-cards .company-cardlist__buttonIcon::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: 50%;
  color: currentColor;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.35s ease;
}

.poscom-top-service-cards .company-cardlist__buttonIcon::after {
  transform: translate(-220%, -50%);
}

.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__service,
.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__title,
.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__text,
.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__button {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__text {
  opacity: 1;
  transform: translateY(0);
}

.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__button {
  transform: translateX(4px);
}

.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__buttonIcon {
  --icon-bg: #ffffff;
  --icon-fg: #061b3a;
}

.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__buttonIcon::before {
  transform: translate(200%, -50%);
}

.poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__buttonIcon::after {
  transform: translate(-50%, -50%);
}

/* mobile */
@media (max-width: 959px) {
  .poscom-top-service-cards {
    width: min(92vw, 680px);
    margin-top: 72px;
    margin-right: auto;
    margin-bottom: 88px;
    margin-left: auto;
    transform: none;
  }

  .poscom-top-service-cards .company-cardlist {
    display: grid;
    grid-template-columns: 1fr;
    min-height: auto;
    overflow: hidden;
    border-radius: 24px;
  }

  .poscom-top-service-cards .company-cardlist__item {
    width: 100%;
    min-height: 240px;
    margin: 0;
    border-left: 0;
    transform: none;
  }

  .poscom-top-service-cards .company-cardlist__item + .company-cardlist__item {
    border-top: 1px solid rgba(6, 27, 58, 0.18);
  }

  .poscom-top-service-cards .company-cardlist__item:hover {
    transform: none;
  }

  .poscom-top-service-cards .company-cardlist__image,
  .poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__image {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  .poscom-top-service-cards .company-cardlist__shade,
  .poscom-top-service-cards .company-cardlist__item:hover .company-cardlist__shade {
    opacity: 1;
    background:
      linear-gradient(
        90deg,
        rgba(3, 13, 32, 0.74) 0%,
        rgba(3, 13, 32, 0.28) 100%
      );
  }

  .poscom-top-service-cards .company-cardlist__content {
    min-height: 240px;
    padding: 24px;
  }

  .poscom-top-service-cards .company-cardlist__service,
  .poscom-top-service-cards .company-cardlist__title,
  .poscom-top-service-cards .company-cardlist__text,
  .poscom-top-service-cards .company-cardlist__button {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
  }

  .poscom-top-service-cards .company-cardlist__text {
    margin-top: auto;
    margin-bottom: 24px;
    opacity: 1;
    transform: none;
  }
}


/* ======================================
  TOP Flow of Request
  画像をその場でスクロール拡大・保持・縮小
====================================== */

.poscom-flow-scroll {
  position: relative;
  overflow: visible;
}

.poscom-flow-scroll .poscom-flow-image {
  position: relative;
  z-index: 1;
  overflow: visible;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto !important;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.poscom-flow-scroll .poscom-flow-image img {
  display: block;
  width: min(520px, 100%) !important;
  height: auto !important;
  transform-origin: center center;
  will-change: transform, filter;
}

.poscom-flow-scroll .poscom-flow-image.is-flow-active {
  z-index: 10;
}

.poscom-flow-scroll .poscom-flow-image.is-flow-active img {
  filter:
    drop-shadow(0 26px 56px rgba(6, 27, 58, 0.18))
    drop-shadow(0 0 18px rgba(83, 178, 187, 0.10));
}

/* ======================================
  Business Files Heading Badge Reset
====================================== */
.poscom-strength-panel .poscom-strength-heading {
  display: grid;
  justify-items: start;
  gap: clamp(20px, 1.7vw, 28px);
  margin-bottom: clamp(12px, 1.35vw, 18px) !important;
}

.poscom-strength-panel .poscom-strength-heading__num {
  position: relative;
  isolation: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 4.7vw, 80px);
  height: clamp(49px, 3.7vw, 58px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 999px 999px 12px 999px;
  background:
    linear-gradient(
      135deg,
      #2edee2 0%,
      #12b8c6 48%,
      #087c96 100%
    ) !important;
  color: #ffffff !important;
  font-family: "Montserrat", "Arial", sans-serif;
  font-size: clamp(18px, 1.7vw, 27px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow:
    0 14px 30px rgba(0, 160, 176, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.poscom-strength-panel .poscom-strength-heading__num::before,
.poscom-strength-panel .poscom-strength-heading__num::after {
  content: none !important;
  display: none !important;
}

.poscom-strength-panel .poscom-strength-heading__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.32em;
  padding: 0.24em 0.36em 0.06em;
  border-radius: 0;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #effafa 46%,
      #cdedf0 100%
    ) !important;
  color: #061b3a !important;
  font-size: clamp(31px, 3.05vw, 47px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  box-shadow:
    10px -11px 0 rgba(83, 178, 187, 0.14),
    10px -11px 0 1px rgba(83, 178, 187, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(83, 178, 187, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  text-shadow: none;
}

.poscom-strength-panel .poscom-strength-list li {
  font-size: clamp(16px, 1.28vw, 22px);
  letter-spacing: 0.065em;
}

.poscom-strength-panel .poscom-strength-lead {
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.6;
  letter-spacing: 0.18em;
}

.poscom-strength-panel .poscom-strength-panel__visual {
  background:
    linear-gradient(155deg, rgba(6, 27, 58, 0.045) 0%, rgba(6, 27, 58, 0) 34%),
    linear-gradient(28deg, rgba(36, 210, 216, 0.14) 0%, rgba(36, 210, 216, 0) 42%),
    linear-gradient(135deg, #fbfdfe 0%, #f2f8f9 38%, #eef6f7 62%, #f8fbfc 100%) !important;
}

@media (min-width: 960px) {
  .poscom-strength-panel .poscom-strength-panel__text {
    padding-bottom: clamp(34px, 3.4vw, 56px);
  }

  .poscom-strength-panel .poscom-strength-panel__text-inner {
    transform: translateY(clamp(-14px, -1vw, -8px));
  }

  .poscom-strength-panel .poscom-strength-list {
    margin-left: clamp(4px, 0.3vw, 8px) !important;
  }
}

.poscom-strength-panel--service .poscom-strength-heading__num,
.poscom-strength-panel--mission .poscom-strength-heading__num,
.poscom-strength-panel--reason .poscom-strength-heading__num {
  background:
    linear-gradient(
      135deg,
      #2edee2 0%,
      #12b8c6 48%,
      #087c96 100%
    ) !important;
}

.poscom-strength-panel--service .poscom-strength-heading__label,
.poscom-strength-panel--mission .poscom-strength-heading__label,
.poscom-strength-panel--reason .poscom-strength-heading__label {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #effafa 46%,
      #cdedf0 100%
    ) !important;
  color: #061b3a !important;
  box-shadow:
    10px -11px 0 rgba(83, 178, 187, 0.14),
    10px -11px 0 1px rgba(83, 178, 187, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(83, 178, 187, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

@media (min-width: 960px) and (max-height: 900px) {
  .poscom-strength-panel {
    min-height: clamp(350px, 44vh, 430px);
  }

  .poscom-strength-panel .poscom-strength-heading {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(18px, 1.55vw, 26px);
    margin-bottom: clamp(26px, 2.1vw, 32px) !important;
  }

  .poscom-strength-panel .poscom-strength-panel__text {
    padding: clamp(18px, 2vw, 30px);
    padding-left: clamp(34px, 3.2vw, 54px);
    align-items: center;
  }

  .poscom-strength-panel .poscom-strength-panel__text-inner {
    width: auto;
    max-width: min(31em, calc(100% - 8px));
    margin-left: clamp(10px, 1.2vw, 22px);
    transform: none;
  }

  .poscom-strength-panel .poscom-strength-heading__num {
    width: auto;
    min-width: 68px;
    height: 40px;
    padding-inline: 16px;
    font-size: clamp(19px, 1.45vw, 22px);
  }

  .poscom-strength-panel .poscom-strength-heading__label {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(28px, 2.55vw, 40px);
    white-space: nowrap;
  }

  .poscom-strength-panel .poscom-strength-lead {
    margin-bottom: clamp(22px, 1.9vw, 28px) !important;
    font-size: clamp(14.5px, 1.05vw, 17px);
    line-height: 1.68;
    letter-spacing: 0.09em;
  }

  .poscom-strength-panel .poscom-strength-list {
    gap: clamp(11px, 1.05vw, 15px);
    margin-left: clamp(6px, 0.55vw, 12px) !important;
  }

  .poscom-strength-panel .poscom-strength-list li {
    font-size: clamp(18px, 1.36vw, 22px);
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .poscom-strength-panel .poscom-strength-panel__visual {
    padding: clamp(14px, 2vw, 30px);
  }

  .poscom-strength-panel .poscom-strength-panel__visual img {
    max-height: min(360px, calc(100svh - 305px));
    object-fit: contain;
    object-position: center center;
  }
}

@media (min-width: 960px) and (max-height: 760px) {
  .poscom-strength-panel {
    min-height: clamp(318px, 43vh, 342px);
  }

  .poscom-strength-panel .poscom-strength-heading {
    gap: clamp(16px, 1.35vw, 22px);
    margin-bottom: clamp(18px, 1.55vw, 24px) !important;
  }

  .poscom-strength-panel .poscom-strength-panel__text {
    padding: clamp(12px, 1.55vw, 20px);
    padding-left: clamp(28px, 2.7vw, 44px);
    align-items: center;
  }

  .poscom-strength-panel .poscom-strength-panel__text-inner {
    width: auto;
    max-width: min(31em, calc(100% - 6px));
    margin-left: clamp(8px, 0.9vw, 16px);
  }

  .poscom-strength-panel .poscom-strength-heading__num {
    min-width: 64px;
    height: 38px;
    padding-inline: 14px;
    font-size: clamp(18px, 1.35vw, 20px);
  }

  .poscom-strength-panel .poscom-strength-heading__label {
    font-size: clamp(25px, 2.35vw, 34px);
  }

  .poscom-strength-panel .poscom-strength-lead {
    margin-bottom: clamp(16px, 1.4vw, 22px) !important;
    font-size: clamp(14px, 1.02vw, 16.5px);
    line-height: 1.58;
    letter-spacing: 0.08em;
  }

  .poscom-strength-panel .poscom-strength-list {
    gap: clamp(9px, 0.82vw, 12px);
    margin-left: clamp(5px, 0.45vw, 9px) !important;
  }

  .poscom-strength-panel .poscom-strength-list li {
    font-size: clamp(16px, 1.22vw, 19px);
    line-height: 1.45;
    letter-spacing: 0.045em;
  }

  .poscom-strength-panel .poscom-strength-panel__visual {
    padding: clamp(10px, 1.5vw, 22px);
  }

  .poscom-strength-panel .poscom-strength-panel__visual img {
    max-height: min(300px, calc(100svh - 285px));
    object-fit: contain;
    object-position: center center;
  }
}


/* ======================================
  TOP Hero Quick Contact Nav
  メインビジュアル右側：かんたん相談ナビ
  中間サイズ・16:9対応・右端見切れ防止版
====================================== */

.poscom-hero-contact-nav {
  --poscom-hero-contact-nav-offset-y: 0px;
  --poscom-hero-contact-nav-reveal-x: 0px;
  --poscom-hero-contact-nav-reveal-y: 0px;
  --poscom-hero-contact-nav-reveal-scale: 1;

  position: relative;
  z-index: 5;

  width: clamp(400px, 29vw, 455px) !important;
  max-width: none !important;
  margin: 0 0 0 auto !important;
  padding: 17px 19px 18px !important;
  overflow: visible;
  isolation: isolate;

  color: #ffffff;
  background:
    radial-gradient(circle at 88% 10%, rgba(22, 198, 211, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(3, 18, 42, 0.98) 0%, rgba(5, 42, 76, 0.96) 48%, rgba(4, 76, 102, 0.90) 100%);
  border: 1px solid rgba(83, 178, 187, 0.22);
  box-shadow:
    18px 22px 42px rgba(0, 6, 18, 0.34),
    0 18px 38px rgba(2, 18, 44, 0.30),
    0 0 0 1px rgba(6, 27, 58, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.26);

  font-family: var(--font-sans, "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif);
}

.poscom-hero-contact-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.045), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 32%, rgba(0, 0, 0, 0.10) 100%),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.026) 0,
      rgba(255, 255, 255, 0.026) 1px,
      transparent 1px,
      transparent 9px
    );
}

.poscom-hero-contact-nav::after {
  content: none;
}

.poscom-hero-contact-nav > * {
  position: relative;
  z-index: 1;
}

.poscom-hero-contact-nav:focus-within {
  border-color: rgba(83, 178, 187, 0.34);
  box-shadow:
    20px 24px 46px rgba(0, 6, 18, 0.36),
    0 20px 42px rgba(2, 18, 44, 0.32),
    0 0 0 1px rgba(6, 27, 58, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28);
}

.poscom-hero-contact-nav__eyebrow {
  display: none !important;
}

/* title */
.poscom-hero-contact-nav__title {
  margin: 0 0 0.3em !important;
  color: #ffffff;
  font-size: clamp(25px, 1.55vw, 31px) !important;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: 0.055em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

/* lead */
.poscom-hero-contact-nav__lead {
  margin: 0 0 11px !important;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(16px, 1.05vw, 18.5px) !important;
  font-weight: 800;
  line-height: 1.52;
  letter-spacing: 0.04em;
  white-space: normal !important;
}

/* step */
.poscom-hero-contact-nav__step {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 9px;
}

.poscom-hero-contact-nav__step-label {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0 !important;

  color: #ffffff;
  font-size: clamp(12px, 0.82vw, 14px) !important;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.poscom-hero-contact-nav__step-label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 27px;

  color: #061b3a;
  background: #38edd9;
  font-family: var(--font-en, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif);
  font-size: 12px !important;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
}

/* select */
.poscom-hero-contact-nav__select-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.poscom-hero-contact-nav__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 3px solid #061b3a;
  border-bottom: 3px solid #061b3a;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.poscom-hero-contact-nav__select {
  display: block;
  width: 100%;
  min-height: 43px !important;
  padding: 0 46px 0 15px !important;

  color: #061b3a;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 0;
  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;

  font-size: clamp(13.5px, 0.92vw, 15.5px) !important;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.02em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.poscom-hero-contact-nav__select:focus {
  outline: none;
  border-color: #38edd9;
  box-shadow:
    0 0 0 2px rgba(56, 237, 217, 0.25),
    0 0 18px rgba(56, 237, 217, 0.16);
}

.poscom-hero-contact-nav__select option {
  padding: 10px 36px 10px 14px;
  font-size: 14px;
}

/* button */
.poscom-hero-contact-nav__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px !important;
  margin-top: 13px !important;
  padding: 0.78em 2.8em 0.78em 1.3em !important;

  color: #061b3a;
  background: linear-gradient(135deg, #ffe600 0%, #ffd000 100%);
  border: none;
  border-radius: 0;
  box-shadow:
    0 11px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  cursor: pointer;

  font-size: clamp(13.5px, 0.92vw, 15.5px) !important;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;

  transition:
    transform 0.25s ease,
    filter 0.25s ease,
    box-shadow 0.25s ease;
}

.poscom-hero-contact-nav__button::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 21px;
  transform: translateY(-50%);
  color: #061b3a;
  font-size: 21px !important;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.25s ease;
}

.poscom-hero-contact-nav__button:hover,
.poscom-hero-contact-nav__button:focus-visible {
  outline: none;
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.poscom-hero-contact-nav__button:hover::after,
.poscom-hero-contact-nav__button:focus-visible::after {
  transform: translate(4px, -50%);
}

.poscom-hero-contact-nav__note {
  display: none !important;
}

/* PC：右端を切らさず、メインビジュアル内で少し上へ */
@media (min-width: 960px) {
  .p-mainVisual .poscom-hero-main-grid.pc_only {
    --poscom-hero-panel-fallback-top: clamp(30px, 4.6vh, 44px);
    --poscom-hero-final-top-js: var(--poscom-hero-panel-fallback-top);
    --poscom-hero-contact-top-js: var(--poscom-hero-panel-fallback-top);
  }

  .p-mainVisual .poscom-hero-main-grid.pc_only > .swell-block-columns__inner {
    align-items: flex-start !important;
  }

  .p-mainVisual .poscom-hero-main-grid.pc_only > .swell-block-columns__inner > .swell-block-column[data-valign="center"] {
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }

  .p-mainVisual .poscom-hero-main-grid.pc_only .poscom-hero-motion {
    --poscom-hero-final-top: var(--poscom-hero-final-top-js);
  }

  .p-mainVisual .poscom-hero-main-grid.pc_only .poscom-hero-contact-nav {
    margin: var(--poscom-hero-contact-top-js) 0 0 auto !important;
  }

  .poscom-hero-contact-nav {
    width: min(100%, clamp(360px, 29vw, 455px)) !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 17px 19px 18px !important;
    transform:
      translate(
        var(--poscom-hero-contact-nav-reveal-x),
        calc(var(--poscom-hero-contact-nav-offset-y) + var(--poscom-hero-contact-nav-reveal-y))
      )
      scale(var(--poscom-hero-contact-nav-reveal-scale));
  }

  .poscom-hero-contact-nav__select {
    color: #061b3a;
    background-color: rgba(255, 255, 255, 0.96);
    border-color: rgba(83, 178, 187, 0.42);
    box-shadow:
      0 7px 14px rgba(2, 18, 44, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.86);
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .poscom-hero-contact-nav__select:focus {
    border-color: rgba(22, 198, 211, 0.78);
    box-shadow:
      0 0 0 2px rgba(22, 198, 211, 0.20),
      0 9px 18px rgba(2, 18, 44, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.90);
  }

  .poscom-hero-contact-nav__button {
    box-shadow:
      0 10px 18px rgba(2, 18, 44, 0.22),
      0 2px 0 rgba(126, 92, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.68);
    transition:
      filter 0.25s ease,
      box-shadow 0.25s ease;
  }

  .poscom-hero-contact-nav__button:hover,
  .poscom-hero-contact-nav__button:focus-visible {
    transform: none;
    filter: brightness(1.04);
    box-shadow:
      0 12px 22px rgba(2, 18, 44, 0.24),
      0 2px 0 rgba(126, 92, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.76);
  }
}

@media (min-width: 960px) and (max-width: 1320px) {
  .poscom-hero-contact-nav {
    width: min(100%, clamp(340px, 28vw, 400px)) !important;
    max-width: 100% !important;
    padding: 15px 16px 16px !important;
    box-sizing: border-box;
  }

  .poscom-hero-contact-nav__title {
    margin-bottom: 0.26em !important;
    font-size: clamp(23px, 1.45vw, 28px) !important;
  }

  .poscom-hero-contact-nav__lead {
    margin-bottom: 9px !important;
    font-size: clamp(14px, 0.95vw, 16px) !important;
    line-height: 1.45;
  }

  .poscom-hero-contact-nav__step {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 8px;
    margin-top: 7px;
  }

  .poscom-hero-contact-nav__step-label {
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 6px;
    min-width: 0;
    font-size: 11px !important;
  }

  .poscom-hero-contact-nav__step-label span {
    width: 29px;
    height: 24px;
    font-size: 10.5px !important;
  }

  .poscom-hero-contact-nav__select-wrap::after {
    right: 12px;
    width: 7px;
    height: 7px;
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
  }

  .poscom-hero-contact-nav__select {
    min-width: 0;
    min-height: 39px !important;
    padding-right: 30px !important;
    padding-left: 10px !important;
    font-size: 11.6px !important;
    letter-spacing: 0.005em !important;
  }

  .poscom-hero-contact-nav__button {
    max-width: 100%;
    min-height: 42px !important;
    margin-top: 10px !important;
    padding-right: 2.4em !important;
    padding-left: 1.1em !important;
    box-sizing: border-box;
    font-size: 12.5px !important;
  }

  .poscom-hero-contact-nav__button::after {
    right: 17px;
    font-size: 18px !important;
  }
}

/* 16:9・低いノートPC対策 */
@media (min-width: 960px) and (max-width: 1366px) and (max-height: 760px) {
  .poscom-hero-contact-nav {
    width: min(100%, clamp(340px, 27vw, 390px)) !important;
    max-width: 100% !important;
    padding: 15px 16px 16px !important;
    box-sizing: border-box;
  }

  .poscom-hero-contact-nav__title {
    font-size: clamp(23px, 1.42vw, 28px) !important;
    margin-bottom: 0.26em !important;
  }

  .poscom-hero-contact-nav__lead {
    margin-bottom: 9px !important;
    font-size: clamp(15px, 0.95vw, 16px) !important;
    line-height: 1.45;
  }

  .poscom-hero-contact-nav__step {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 7px;
    margin-top: 7px;
  }

  .poscom-hero-contact-nav__step-label {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px;
    min-width: 0;
    font-size: 10.8px !important;
    letter-spacing: 0.025em;
  }

  .poscom-hero-contact-nav__step-label span {
    width: 28px;
    height: 24px;
    font-size: 10.5px !important;
  }

  .poscom-hero-contact-nav__select-wrap::after {
    right: 11px;
    width: 7px;
    height: 7px;
    border-right-width: 2.4px;
    border-bottom-width: 2.4px;
  }

  .poscom-hero-contact-nav__select {
    min-width: 0;
    min-height: 39px !important;
    padding: 0 28px 0 8px !important;
    font-size: 11.4px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35;
  }

  .poscom-hero-contact-nav__button {
    max-width: 100%;
    min-height: 42px !important;
    margin-top: 10px !important;
    padding-right: 2.4em !important;
    padding-left: 1.1em !important;
    box-sizing: border-box;
    font-size: 12.5px !important;
  }

  .poscom-hero-contact-nav__button::after {
    right: 17px;
    font-size: 18px !important;
  }
}

@media (min-width: 1367px) {
  .poscom-hero-contact-nav {
    --poscom-hero-contact-nav-offset-y: 0px;

    width: clamp(400px, 29vw, 455px) !important;
    max-width: none !important;
    padding: 17px 19px 18px !important;
    box-sizing: border-box;
  }

  .poscom-hero-contact-nav__title {
    margin-bottom: 0.3em !important;
    font-size: clamp(25px, 1.55vw, 31px) !important;
  }

  .poscom-hero-contact-nav__lead {
    margin-bottom: 11px !important;
    font-size: clamp(16px, 1.05vw, 18.5px) !important;
    line-height: 1.52;
  }

  .poscom-hero-contact-nav__step {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 10px;
    margin-top: 9px;
  }

  .poscom-hero-contact-nav__step-label {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
    font-size: clamp(12px, 0.82vw, 14px) !important;
    letter-spacing: 0.04em;
  }

  .poscom-hero-contact-nav__step-label span {
    width: 34px;
    height: 27px;
    font-size: 12px !important;
  }

  .poscom-hero-contact-nav__select-wrap::after {
    right: 16px;
    width: 8px;
    height: 8px;
    border-right-width: 3px;
    border-bottom-width: 3px;
  }

  .poscom-hero-contact-nav__select {
    min-width: 0;
    min-height: 43px !important;
    padding: 0 46px 0 15px !important;
    font-size: clamp(13.5px, 0.92vw, 15.5px) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.35;
  }

  .poscom-hero-contact-nav__button {
    min-height: 48px !important;
    margin-top: 13px !important;
    padding: 0.78em 2.8em 0.78em 1.3em !important;
    font-size: clamp(13.5px, 0.92vw, 15.5px) !important;
  }

  .poscom-hero-contact-nav__button::after {
    right: 21px;
    font-size: 21px !important;
  }
}

/* ======================================
  TOP Hero Contact Nav Reveal
  右側かんたん相談ナビ：初期チラ見防止
====================================== */

@media (min-width: 960px) {
  .poscom-hero-contact-nav:not(.is-revealed) {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .poscom-hero-contact-nav {
    --poscom-hero-contact-nav-reveal-x: 0px;
    --poscom-hero-contact-nav-reveal-y: 0px;
    --poscom-hero-contact-nav-reveal-scale: 1;

    opacity: 1;
    visibility: visible;
    filter: none;
  }
}



/* ======================================
  TOP Hero Motion Layer
  左70%カラム：コピー演出＋3画像吸い込み・最終カード
====================================== */

.poscom-hero-motion {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  height: clamp(360px, 40vh, 490px);
  min-height: 360px;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  color: #ffffff;
  contain: layout paint;
}

/* JS初期化前のチラ見防止 */
.poscom-hero-motion:not(.is-static) .poscom-hero-motion__word,
.poscom-hero-motion:not(.is-static) .poscom-hero-motion__object,
.poscom-hero-motion:not(.is-static) .poscom-hero-motion__portal,
.poscom-hero-motion:not(.is-static) .poscom-hero-motion__final-card {
  opacity: 0;
  visibility: hidden;
}

.poscom-hero-motion.is-static .poscom-hero-motion__final-card {
  opacity: 1;
  visibility: visible;
}

.poscom-hero-motion__copy {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.poscom-hero-motion__word {
  position: absolute;
  display: block;
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.065em;
  white-space: nowrap;
  will-change: transform, opacity, filter;
  text-shadow:
    0 2px 0 rgba(6, 27, 58, 0.34),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(94, 212, 232, 0.14);
}

/* 左側：1段階目
   14型ノートでは元の%配置に近く見せ、
   大きいモニターでは右へ流れすぎないように上限だけを持たせる。
   前回の clamp は最小pxが大きすぎたため、今回は下限を低くする。
*/
.poscom-hero-motion__word--shipping {
  top: 14%;
  left: clamp(58px, 9%, 96px);
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: clamp(29px, 2.8vw, 45px);
  letter-spacing: 0.105em;
}

/* 上段：2段階目
   小さいPCでは 21% に近く、大型では210px程度で止める。
*/
.poscom-hero-motion__word--outsourcing {
  top: 21%;
  left: clamp(126px, 21%, 210px);
  right: 4%;
  width: auto;
  font-size: clamp(27px, 2.65vw, 44px);
  letter-spacing: 0.045em;
}

/* 中段：3段階目
   「本業が」が右へ離れすぎないようにしつつ、14型では元の配置感を残す。
*/
.poscom-hero-motion__word--core {
  top: 42%;
  left: clamp(190px, 31.5%, 308px);
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-size: clamp(26px, 2.45vw, 40px);
  letter-spacing: 0.105em;
}

/* 下段：4段階目
   「スピードアップ」は主役として残すが、大型モニターで右へ逃がしすぎない。
*/
.poscom-hero-motion__word--speed {
  top: 57%;
  left: clamp(126px, 21%, 210px);
  right: 7%;
  width: auto;
  font-size: clamp(42px, 4.25vw, 68px);
  letter-spacing: 0.065em;
}

.poscom-hero-motion__objects {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.poscom-hero-motion__object {
  position: absolute;
  display: block;
  width: clamp(84px, 8vw, 132px);
  height: clamp(84px, 8vw, 132px);
  will-change: transform, opacity, filter;
}

.poscom-hero-motion__object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 30px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 20px rgba(94, 212, 232, 0.28));
}

/* 3業務画像：左側で固めず、奥行きのある三角構図にする */
.poscom-hero-motion__object--product-shipping {
  top: 28%;
  left: 11%;
  width: clamp(168px, 14vw, 242px);
  height: clamp(168px, 14vw, 242px);
}

.poscom-hero-motion__object--dm-mailing {
  top: 18%;
  left: 46%;
  width: clamp(112px, 9.2vw, 160px);
  height: clamp(112px, 9.2vw, 160px);
}

.poscom-hero-motion__object--printing {
  top: 20%;
  left: 30%;
  width: clamp(118px, 9.8vw, 170px);
  height: clamp(118px, 9.8vw, 170px);
}

/* 吸い込み先：左70%カラムの中央奥 */
.poscom-hero-motion__portal {
  position: absolute;
  top: 36%;
  left: 53%;
  z-index: 3;
  display: block;
  width: clamp(72px, 6.4vw, 104px);
  height: clamp(72px, 6.4vw, 104px);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(94,212,232,0.72) 18%, rgba(94,212,232,0.24) 42%, transparent 74%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  filter: blur(0.5px);
  will-change: transform, opacity, filter;
}

/* ======================================
  TOP Hero Motion
  最終カード：業務統合パネル
====================================== */

.poscom-hero-motion__final-card {
  --poscom-hero-final-inset: clamp(18px, 4%, 42px);

  position: absolute;
  top: var(--poscom-hero-final-top);
  left: var(--poscom-hero-final-inset);
  right: auto;
  z-index: 10;
  display: grid;
  grid-template-columns: clamp(136px, 18%, 168px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 1.4vw, 24px);
  width: min(820px, calc(100% - var(--poscom-hero-final-inset) - var(--poscom-hero-final-inset)));
  max-width: calc(100% - var(--poscom-hero-final-inset) - var(--poscom-hero-final-inset));
  min-height: clamp(194px, 21vh, 232px);
  padding: clamp(18px, 1.75vw, 28px);
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(68, 238, 224, 0.48);
  border-radius: 18px;
  background: rgba(23, 177, 180, 0.9);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2px);
}

.poscom-hero-motion__final-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.07) 0 1px,
      transparent 1px 14px
    ),
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.2), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(6, 27, 58, 0.2));
  opacity: 0.86;
}

.poscom-hero-motion__final-card::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -44%;
  width: 36%;
  height: 78%;
  pointer-events: none;
  background: rgba(6, 27, 58, 0.12);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.poscom-hero-motion__final-badge,
.poscom-hero-motion__final-body {
  position: relative;
  z-index: 1;
}

.poscom-hero-motion__final-badge {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  justify-items: center;
  row-gap: clamp(5px, 0.5vw, 8px);
  min-height: clamp(148px, 11.4vw, 172px);
  padding: clamp(14px, 1.12vw, 17px) clamp(12px, 1vw, 16px);
  border: 1px solid rgba(98, 246, 255, 0.54);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(5, 45, 78, 0.82), rgba(3, 21, 47, 0.94));
  box-shadow:
    0 0 0 1px rgba(98, 246, 255, 0.1),
    0 0 26px rgba(43, 214, 231, 0.18),
    inset 0 0 22px rgba(43, 214, 231, 0.12);
  color: #ffffff;
  text-align: center;
}

.poscom-hero-motion__final-badge::before,
.poscom-hero-motion__final-badge::after {
  content: "";
  display: block;
  justify-self: center;
  width: 72%;
  height: 1px;
  background: rgba(98, 246, 255, 0.5);
}

.poscom-hero-motion__final-badge::before {
  grid-row: 1;
}

.poscom-hero-motion__final-badge::after {
  grid-row: 5;
}

.poscom-hero-motion__final-badge-label,
.poscom-hero-motion__final-badge > span:first-of-type {
  grid-row: 2;
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(12px, 0.86vw, 15px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.poscom-hero-motion__final-badge-unit,
.poscom-hero-motion__final-badge > span:last-of-type {
  grid-row: 4;
  display: block;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(13.5px, 0.95vw, 16px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.poscom-hero-motion__final-badge strong,
.poscom-hero-motion__final-badge > strong {
  grid-row: 3;
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #5ff4ff;
  font-family: "Montserrat", "Arial", sans-serif;
  font-size: clamp(47px, 3.45vw, 62px);
  font-weight: 950;
  line-height: 0.92;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0 18px rgba(43, 214, 231, 0.42),
    0 2px 0 rgba(0, 0, 0, 0.18);
  transform: none;
}

.poscom-hero-motion__final-badge strong span {
  margin-left: 0.03em;
  font-size: 0.42em;
  font-weight: 950;
  line-height: 1;
}

.poscom-hero-motion__final-body {
  min-width: 0;
  max-width: 100%;
}

.poscom-hero-motion__final-body .poscom-hero-motion__final-title {
  max-width: 100%;
  margin: 0;
  color: #ffffff;
  font-size: clamp(30px, 2.4vw, 44px);
  font-weight: 950;
  line-height: 1.12;
  letter-spacing: 0.04em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.12),
    0 14px 36px rgba(0, 0, 0, 0.26);
}

.poscom-hero-motion__final-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(5px, 0.55vw, 8px);
  width: 100%;
  max-width: 100%;
  margin-top: clamp(12px, 1vw, 16px);
}

.poscom-hero-motion__final-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  min-width: 0;
  min-height: clamp(30px, 2.1vw, 36px);
  padding: 0.36em 0.38em;
  box-sizing: border-box;
  border: 1px solid rgba(36, 210, 216, 0.48);
  border-radius: 7px;
  background: rgba(3, 20, 43, 0.86);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.034em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.12);
}

.poscom-hero-motion__final-tag::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
  background-color: #24d2d8;
  filter: drop-shadow(0 0 5px rgba(36, 210, 216, 0.38));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.poscom-hero-motion__final-tag-label {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(9px, 0.62vw, 10.5px);
  font-weight: 800;
}

.poscom-hero-motion__final-tag strong {
  min-width: 0;
  color: #ffe600;
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 950;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.poscom-hero-motion__final-tag--shipping::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 6.5h11v8H3v-8Zm12 2h3.3l2.7 3.1v2.9h-2.1a3 3 0 0 0-5.8 0H10a3 3 0 0 0-5.8 0H2V5h13v3.5Zm1.4 1.5v2h3.1l-1.7-2h-1.4ZM7 17.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm9 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 6.5h11v8H3v-8Zm12 2h3.3l2.7 3.1v2.9h-2.1a3 3 0 0 0-5.8 0H10a3 3 0 0 0-5.8 0H2V5h13v3.5Zm1.4 1.5v2h3.1l-1.7-2h-1.4ZM7 17.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm9 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z'/%3E%3C/svg%3E");
}

.poscom-hero-motion__final-tag--price::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 1.8a8.2 8.2 0 1 1 0 16.4 8.2 8.2 0 0 1 0-16.4Zm-3.7 4.1h2.3l1.4 2.6 1.4-2.6h2.3l-2.1 3.5h1.7v1.3h-2.2v1h2.2V15h-2.2v2h-2.2v-2H8.7v-1.3h2.2v-1H8.7v-1.3h1.7L8.3 7.9Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 1.8a8.2 8.2 0 1 1 0 16.4 8.2 8.2 0 0 1 0-16.4Zm-3.7 4.1h2.3l1.4 2.6 1.4-2.6h2.3l-2.1 3.5h1.7v1.3h-2.2v1h2.2V15h-2.2v2h-2.2v-2H8.7v-1.3h2.2v-1H8.7v-1.3h1.7L8.3 7.9Z'/%3E%3C/svg%3E");
}

/* DM発送：￥ではなく封筒アイコン */
.poscom-hero-motion__final-tag--dm::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 5.5h18v13H3v-13Zm2 2.1v.45l7 4.6 7-4.6V7.6H5Zm14 2.65-6.45 4.25a1 1 0 0 1-1.1 0L5 10.25V16.5h14v-6.25Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M3 5.5h18v13H3v-13Zm2 2.1v.45l7 4.6 7-4.6V7.6H5Zm14 2.65-6.45 4.25a1 1 0 0 1-1.1 0L5 10.25V16.5h14v-6.25Z'/%3E%3C/svg%3E");
}

.poscom-hero-motion__final-tag--repeat::before,
.poscom-hero-motion__final-tag--print::before {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7.2 7.2A7 7 0 0 1 18.9 10h-2.2a5 5 0 0 0-8.1-1.4L6.5 10.7H10v2H3.2V5.9h2v3.3l2-2Zm9.6 9.6A7 7 0 0 1 5.1 14h2.2a5 5 0 0 0 8.1 1.4l2.1-2.1H14v-2h6.8v6.8h-2v-3.3l-2 2Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7.2 7.2A7 7 0 0 1 18.9 10h-2.2a5 5 0 0 0-8.1-1.4L6.5 10.7H10v2H3.2V5.9h2v3.3l2-2Zm9.6 9.6A7 7 0 0 1 5.1 14h2.2a5 5 0 0 0 8.1 1.4l2.1-2.1H14v-2h6.8v6.8h-2v-3.3l-2 2Z'/%3E%3C/svg%3E");
}

/* 長い短納期タグだけ少し小さく */
.poscom-hero-motion__final-tag--repeat strong {
  font-size: clamp(9.6px, 0.68vw, 11.4px);
}

.poscom-hero-motion__final-lead {
  display: grid;
  gap: 0.28em;
  width: 100%;
  max-width: 100%;
  margin: clamp(14px, 1.2vw, 18px) 0 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 850;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

.poscom-hero-motion__final-lead span {
  display: block;
  white-space: normal;
}

@media (min-width: 960px) {
  .poscom-hero-motion {
    --poscom-hero-final-top: var(--poscom-hero-panel-fallback-top, clamp(30px, 4.6vh, 44px));

    overflow: clip;
    overflow-clip-margin: 36px;
  }

  .poscom-hero-motion__final-card {
    --poscom-hero-final-inset: -36px;

    top: var(--poscom-hero-final-top);
    left: var(--poscom-hero-final-inset);
    right: auto;
    translate: none;
    width: min(836px, calc(100% + 24px));
    max-width: calc(100% + 24px);
    grid-template-columns: clamp(146px, 18%, 158px) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(18px, 1.3vw, 22px);
    min-height: clamp(258px, 30vh, 292px);
    padding: clamp(17px, 1.45vw, 23px);
    border-color: rgba(108, 224, 221, 0.42);
    border-radius: 12px;
    background:
      radial-gradient(circle at 78% 42%, rgba(66, 202, 197, 0.18), transparent 40%),
      radial-gradient(circle at 14% 2%, rgba(139, 209, 226, 0.09), transparent 31%),
      linear-gradient(
        110deg,
        rgba(3, 21, 44, 0.97) 0%,
        rgba(4, 34, 58, 0.95) 58%,
        rgba(5, 65, 75, 0.9) 100%
      );
    box-shadow:
      0 30px 62px rgba(0, 9, 26, 0.32),
      0 0 0 1px rgba(126, 239, 233, 0.07),
      inset 0 1px 0 rgba(235, 255, 255, 0.16),
      inset 0 -1px 0 rgba(4, 15, 33, 0.54),
      inset 18px 0 34px rgba(38, 173, 179, 0.04);
    backdrop-filter: blur(8px) saturate(1.05);
  }

  .poscom-hero-motion__final-card::before {
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(104, 239, 232, 0.24) 38%,
        transparent 76%
      ) 0 0 / 100% 1px no-repeat,
      repeating-linear-gradient(
        90deg,
        rgba(130, 222, 224, 0.038) 0 1px,
        transparent 1px 60px
      ),
      repeating-linear-gradient(
        0deg,
        rgba(130, 222, 224, 0.03) 0 1px,
        transparent 1px 42px
      ),
      linear-gradient(
        118deg,
        transparent 0 62%,
        rgba(98, 232, 225, 0.065) 62.2% 62.8%,
        transparent 63%
      );
    opacity: 0.7;
  }

  .poscom-hero-motion__final-card::after {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background:
      linear-gradient(
        90deg,
        rgba(81, 225, 220, 0.68),
        rgba(81, 225, 220, 0.18) 58%,
        transparent 92%
      );
    clip-path: none;
  }

  .poscom-hero-motion__final-badge {
    align-self: stretch;
    min-height: clamp(182px, 13vw, 216px);
    padding: clamp(14px, 1.05vw, 17px) clamp(11px, 0.9vw, 15px);
    border-color: rgba(109, 218, 217, 0.28);
    border-left: 2px solid rgba(82, 216, 211, 0.62);
    border-radius: 8px;
    background:
      radial-gradient(circle at 50% 8%, rgba(76, 193, 197, 0.08), transparent 36%),
      linear-gradient(
        180deg,
        rgba(5, 40, 64, 0.94) 0%,
        rgba(2, 17, 38, 0.96) 100%
      );
    box-shadow:
      0 15px 26px rgba(0, 9, 24, 0.22),
      inset 0 0 0 1px rgba(255, 255, 255, 0.025),
      inset 0 16px 34px rgba(53, 203, 207, 0.045);
  }

  .poscom-hero-motion__final-badge::before,
  .poscom-hero-motion__final-badge::after {
    width: 68%;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(91, 218, 215, 0.62) 18% 82%,
        transparent
      );
  }

  .poscom-hero-motion__final-badge-label,
  .poscom-hero-motion__final-badge > span:first-of-type {
    color: rgba(225, 246, 247, 0.78);
    font-size: clamp(11px, 0.74vw, 12.5px);
    letter-spacing: 0.14em;
  }

  .poscom-hero-motion__final-badge strong,
  .poscom-hero-motion__final-badge > strong {
    color: #70dcda;
    font-size: clamp(46px, 3.2vw, 56px);
    letter-spacing: -0.03em;
    text-shadow:
      0 0 16px rgba(71, 210, 207, 0.15),
      0 2px 0 rgba(0, 0, 0, 0.24);
  }

  .poscom-hero-motion__final-badge-unit,
  .poscom-hero-motion__final-badge > span:last-of-type {
    color: rgba(236, 249, 250, 0.84);
    font-size: clamp(12px, 0.82vw, 14px);
    letter-spacing: 0.14em;
  }

  .poscom-hero-motion__final-body {
    display: grid;
    grid-template-rows: auto auto 1fr;
    align-content: center;
    min-width: 0;
  }

  /*
   * H2はHTML側の <br> で2行にする。
   * 3行化させないため、最大サイズと文字間を少し抑える。
   */
  .poscom-hero-motion__final-body .poscom-hero-motion__final-title {
    white-space: nowrap;
    max-width: 100%;
    padding-left: clamp(8px, 0.7vw, 12px);
    box-sizing: border-box;
    color: #ffffff;
    font-size: clamp(36px, 2.55vw, 46px);
    line-height: 1.16;
    letter-spacing: 0.01em;
    text-shadow:
      0 2px 0 rgba(0, 0, 0, 0.2),
      0 14px 32px rgba(0, 0, 0, 0.34),
      0 0 20px rgba(118, 226, 222, 0.12);
  }

  .poscom-hero-motion__final-tags {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: clamp(7px, 0.58vw, 9px);
    width: 100%;
    max-width: 100%;
    margin-top: clamp(14px, 1vw, 17px);
    padding-left: clamp(8px, 0.7vw, 12px);
    box-sizing: border-box;
  }

  .poscom-hero-motion__final-tag {
    min-width: 0;
    min-height: 40px;
    justify-content: center;
    gap: 0.34em;
    padding: 0.48em 0.56em;
    overflow: hidden;
    box-sizing: border-box;
    border-color: rgba(96, 207, 205, 0.34);
    border-radius: 4px;
    background:
      linear-gradient(
        90deg,
        rgba(6, 43, 64, 0.88),
        rgba(2, 24, 45, 0.9)
      );
    box-shadow:
      inset 2px 0 0 rgba(77, 215, 210, 0.64),
      inset 0 1px 0 rgba(238, 255, 255, 0.07);
  }

  .poscom-hero-motion__final-tag::before {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
    background-color: #63d8d4;
    filter: none;
  }

  .poscom-hero-motion__final-tag-label {
    flex: 0 0 auto;
    color: rgba(222, 242, 243, 0.82);
    font-size: clamp(10.5px, 0.68vw, 12px);
    white-space: nowrap;
  }

  .poscom-hero-motion__final-tag strong {
    min-width: 0;
    color: #ffe477;
    font-size: clamp(12.4px, 0.79vw, 14.4px);
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .poscom-hero-motion__final-tag--repeat strong {
    font-size: clamp(11.4px, 0.72vw, 13px);
  }

  .poscom-hero-motion__final-lead {
    align-self: end;
    gap: 0.22em;
    margin-top: clamp(13px, 0.95vw, 16px);
    padding-top: clamp(10px, 0.75vw, 13px);
    padding-left: clamp(8px, 0.7vw, 12px);
    box-sizing: border-box;
    border-top: 1px solid rgba(132, 211, 211, 0.18);
    color: rgba(228, 242, 244, 0.76);
    font-size: clamp(12.2px, 0.8vw, 13.6px);
    font-weight: 700;
    line-height: 1.54;
    letter-spacing: 0.022em;
  }

  .poscom-hero-motion__final-lead span {
    white-space: normal;
  }
}

/* 低いノートPC・16:9対策 */
@media (min-width: 960px) and (max-height: 760px) {
  .poscom-hero-motion {
    --poscom-hero-final-top: var(--poscom-hero-panel-fallback-top, clamp(26px, 4vh, 36px));

    height: clamp(360px, 40vh, 490px);
    min-height: 360px;
  }

  .poscom-hero-motion__word--shipping {
    top: 13%;
    left: clamp(56px, 8.8%, 88px);
    font-size: clamp(27px, 2.55vw, 40px);
  }

  .poscom-hero-motion__word--outsourcing {
    top: 20%;
    left: clamp(118px, 20.5%, 196px);
    right: 4%;
    width: auto;
    font-size: clamp(25px, 2.45vw, 39px);
  }

  .poscom-hero-motion__word--core {
    top: 42%;
    left: clamp(178px, 30.5%, 282px);
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: clamp(23px, 2.25vw, 34px);
  }

  .poscom-hero-motion__word--speed {
    top: 57%;
    left: clamp(118px, 20.5%, 196px);
    right: 7%;
    width: auto;
    font-size: clamp(36px, 3.65vw, 56px);
  }

  .poscom-hero-motion__object {
    width: clamp(72px, 7vw, 110px);
    height: clamp(72px, 7vw, 110px);
  }

  .poscom-hero-motion__object--product-shipping {
    top: 29%;
    left: 11%;
    width: clamp(130px, 11vw, 176px);
    height: clamp(130px, 11vw, 176px);
  }

  .poscom-hero-motion__object--dm-mailing {
    top: 19%;
    left: 46%;
    width: clamp(88px, 7.6vw, 122px);
    height: clamp(88px, 7.6vw, 122px);
  }

  .poscom-hero-motion__object--printing {
    top: 21%;
    left: 31%;
    width: clamp(92px, 8vw, 128px);
    height: clamp(92px, 8vw, 128px);
  }

  .poscom-hero-motion__final-card {
    top: var(--poscom-hero-final-top);
    translate: none;
    grid-template-columns: clamp(138px, 17.5%, 152px) minmax(0, 1fr);
    min-height: clamp(194px, 21vh, 232px);
    padding: clamp(15px, 1.35vw, 20px);
    gap: clamp(15px, 1.15vw, 20px);
  }

  .poscom-hero-motion__final-badge {
    min-height: clamp(162px, 11.8vw, 178px);
  }

  .poscom-hero-motion__final-badge strong,
  .poscom-hero-motion__final-badge > strong {
    font-size: clamp(42px, 3.15vw, 52px);
  }

  .poscom-hero-motion__final-badge-label,
  .poscom-hero-motion__final-badge > span:first-of-type {
    font-size: clamp(10.8px, 0.76vw, 12.5px);
  }

  .poscom-hero-motion__final-badge-unit,
  .poscom-hero-motion__final-badge > span:last-of-type {
    font-size: clamp(11.8px, 0.84vw, 13.5px);
  }

  .poscom-hero-motion__final-body .poscom-hero-motion__final-title {
    font-size: clamp(32px, 2.4vw, 38px);
    line-height: 1.16;
    letter-spacing: 0.008em;
    white-space: nowrap;
  }

  .poscom-hero-motion__final-tags {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 6px;
    margin-top: 13px;
  }

  .poscom-hero-motion__final-tag {
    min-height: 34px;
    padding: 0.4em 0.44em;
    gap: 0.3em;
  }

  .poscom-hero-motion__final-tag-label {
    font-size: 10px;
  }

  .poscom-hero-motion__final-tag strong {
    font-size: 11.5px;
  }

  .poscom-hero-motion__final-tag--repeat strong {
    font-size: 10.6px;
  }

  .poscom-hero-motion__final-lead {
    font-size: 11.8px;
    line-height: 1.52;
  }
}

@media (min-width: 960px) and (max-width: 1280px) {
  .poscom-hero-motion__final-card {
    --poscom-hero-final-inset: clamp(-20px, -1.35vw, -12px);

    top: var(--poscom-hero-final-top);
    left: var(--poscom-hero-final-inset);
    translate: none;
    width: min(790px, calc(100% - 8px));
    max-width: calc(100% - 8px);
    grid-template-columns: clamp(140px, 17%, 162px) minmax(0, 1fr);
    gap: clamp(16px, 1.3vw, 22px);
    padding: clamp(20px, 1.8vw, 26px);
  }

  .poscom-hero-motion__final-body .poscom-hero-motion__final-title {
    font-size: clamp(32px, 2.4vw, 38px);
    line-height: 1.16;
    letter-spacing: 0.008em;
    white-space: nowrap;
  }

  .poscom-hero-motion__final-tags {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 6px;
    margin-top: 13px;
  }

  .poscom-hero-motion__final-tag {
    min-height: 34px;
    padding: 0.4em 0.44em;
    gap: 0.3em;
  }

  .poscom-hero-motion__final-tag-label {
    font-size: 10px;
  }

  .poscom-hero-motion__final-tag strong {
    font-size: 11.5px;
  }

  .poscom-hero-motion__final-tag--repeat strong {
    font-size: 10.6px;
  }

  .poscom-hero-motion__final-lead {
    font-size: 11.8px;
    line-height: 1.52;
  }
}

@media (min-width: 960px) and (max-width: 1120px) {
  .poscom-hero-motion__final-card {
    --poscom-hero-final-inset: clamp(-14px, -1vw, -8px);

    width: min(750px, calc(100% - 12px));
    max-width: calc(100% - 12px);
  }
}

/* ======================================
  TOP Hero Motion PC Copy Final Override
  PCファーストコピー：14型ノートは元に戻し、広いモニターだけ調整
====================================== */

/*
  広いモニター専用。
  14型ノートPCには効かせない。
*/
@media (min-width: 1600px) and (min-height: 761px) {
  .p-mainVisual .poscom-hero-main-grid.pc_only,
  .p-mainVisual .poscom-hero-main-grid.pc_only > .swell-block-columns__inner,
  .p-mainVisual .poscom-hero-main-grid.pc_only > .swell-block-columns__inner > .swell-block-column:first-child {
    overflow: visible;
  }

  .p-mainVisual .poscom-hero-main-grid.pc_only .poscom-hero-motion {
    overflow: visible;
    overflow-clip-margin: 0;
    contain: layout;
  }

  .p-mainVisual .poscom-hero-main-grid.pc_only .poscom-hero-motion__final-card {
    top: var(--poscom-hero-final-top);
    left: auto;
    right: max(calc(100% - 800px), 12px);
    width: min(980px, calc(100% + 96px));
    max-width: calc(100% + 96px);
    grid-template-columns: clamp(154px, 17.5%, 176px) minmax(0, 1fr);
    gap: clamp(20px, 1.4vw, 26px);
    padding: clamp(20px, 1.45vw, 28px);
  }

  .poscom-hero-motion__final-body .poscom-hero-motion__final-title {
    font-size: clamp(38px, 2.38vw, 46px);
  }

  .poscom-hero-motion__final-lead {
    font-size: clamp(12.2px, 0.78vw, 14px);
    line-height: 1.55;
  }

  .poscom-hero-motion__word--shipping {
    top: 14%;
    left: 5.8%;
    font-size: clamp(29px, 2.8vw, 45px);
    letter-spacing: 0.105em;
  }

  .poscom-hero-motion__word--outsourcing {
    top: 21%;
    left: 14.7%;
    right: auto;
    width: auto;
    font-size: clamp(27px, 2.65vw, 44px);
    letter-spacing: 0.045em;
  }

  .poscom-hero-motion__word--core {
    top: 42%;
    left: 22.7%;
    right: auto;
    width: auto;
    font-size: clamp(26px, 2.45vw, 40px);
    letter-spacing: 0.105em;
  }

  .poscom-hero-motion__word--speed {
    top: 57%;
    left: 14.7%;
    right: auto;
    width: auto;
    font-size: clamp(42px, 4.25vw, 68px);
    letter-spacing: 0.065em;
  }
}

/*
  14型ノートPC・低い画面は変更前寄りに戻す。
  広いモニター用指定より後ろに置くことで、低い画面ではこちらを勝たせる。
*/
@media (min-width: 960px) and (max-height: 760px) {
  .poscom-hero-motion__word--shipping {
    top: 13%;
    left: 9%;
    font-size: clamp(27px, 2.55vw, 40px);
  }

  .poscom-hero-motion__word--outsourcing {
    top: 20%;
    left: 21%;
    right: 4%;
    width: auto;
    font-size: clamp(25px, 2.45vw, 39px);
  }

  .poscom-hero-motion__word--core {
    top: 42%;
    left: 31.5%;
    right: auto;
    width: auto;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: clamp(23px, 2.25vw, 34px);
  }

  .poscom-hero-motion__word--speed {
    top: 57%;
    left: 21%;
    right: 7%;
    width: auto;
    font-size: clamp(36px, 3.65vw, 56px);
  }
}



/* ======================================
  TOP Trading Results
  主な取引先：背景なし・流れる取引先名を主役にする
  ※Pick up / News / Hero / Service には影響させない
====================================== */

.home .poscom-top-results,
.front-page .poscom-top-results {
  position: relative;
  z-index: 18;
  width: 100vw;
  max-width: 100vw;
  margin: clamp(14px, 2vw, 28px) calc(50% - 50vw) clamp(34px, 4vw, 58px);
  overflow: hidden;
  color: var(--poscom-deep-navy, #061b3a);
  background: transparent;
  border-top: 1px solid rgba(6, 27, 58, 0.06);
  border-bottom: 1px solid rgba(6, 27, 58, 0.06);
  box-shadow: none;
  isolation: isolate;
}

.home .poscom-top-results::before,
.front-page .poscom-top-results::before {
  content: "CLIENTS";
  position: absolute;
  right: clamp(24px, 6vw, 120px);
  bottom: 10px;
  z-index: 0;
  color: rgba(6, 27, 58, 0.02);
  font-family: var(--font-en, "Montserrat", "Arial", sans-serif);
  font-size: clamp(64px, 8vw, 132px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.home .poscom-top-results__inner,
.front-page .poscom-top-results__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: clamp(172px, 13vw, 230px) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-height: clamp(132px, 10vw, 178px);
  padding:
    clamp(14px, 1.4vw, 18px)
    clamp(26px, 4.8vw, 84px)
    clamp(16px, 1.8vw, 22px);
  box-sizing: border-box;
}

.home .poscom-top-results__head,
.front-page .poscom-top-results__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 26px) clamp(20px, 2.4vw, 32px) 0;
  border-right: 1px solid rgba(6, 27, 58, 0.08);
}

.home .poscom-top-results__eyebrow,
.front-page .poscom-top-results__eyebrow {
  margin: 0 0 6px;
  color: rgba(0, 129, 148, 0.9);
  font-family: var(--font-en, "Montserrat", "Arial", sans-serif);
  font-size: clamp(9px, 0.72vw, 11px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.2em;
}

.home .poscom-top-results__title,
.front-page .poscom-top-results__title {
  margin: 0;
  color: var(--poscom-deep-navy, #061b3a);
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.08em;
}

.home .poscom-top-results__title::after,
.front-page .poscom-top-results__title::after {
  content: "";
  display: block;
  width: clamp(42px, 4vw, 64px);
  height: 3px;
  margin-top: clamp(8px, 0.8vw, 11px);
  border-radius: 999px;
  background:
    linear-gradient(90deg, #061b3a 0%, #008194 52%, #16c6d3 100%);
}

.home .poscom-top-results__lead,
.front-page .poscom-top-results__lead {
  margin: clamp(8px, 0.9vw, 12px) 0 0;
  color: rgba(6, 27, 58, 0.62);
  font-size: clamp(12px, 0.86vw, 13px);
  font-weight: 800;
  line-height: 1.75;
  letter-spacing: 0.045em;
}

.home .poscom-top-results__lead-key,
.front-page .poscom-top-results__lead-key {
  color: #022f94;
  font-weight: 900;
}

.home .poscom-top-results__lead-key--public,
.front-page .poscom-top-results__lead-key--public {
  color: #022f94;
}

.home .poscom-top-results__marquee,
.front-page .poscom-top-results__marquee {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(10px, 1vw, 14px);
  min-width: 0;
  padding: clamp(18px, 2.2vw, 30px) 0 clamp(18px, 2.2vw, 30px) clamp(14px, 1.8vw, 28px);
}

.home .poscom-top-results__pause,
.front-page .poscom-top-results__pause {
  position: absolute;
  top: -10px;
  right: clamp(8px, 1vw, 14px);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0 0 0 10px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--poscom-deep-navy, #061b3a);
  cursor: pointer;
  box-shadow:
    0 8px 18px rgba(6, 27, 58, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.home .poscom-top-results__pause-icon,
.front-page .poscom-top-results__pause-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 16px;
}

.home .poscom-top-results__pause-icon::before,
.home .poscom-top-results__pause-icon::after,
.front-page .poscom-top-results__pause-icon::before,
.front-page .poscom-top-results__pause-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: currentColor;
}

.home .poscom-top-results__pause-icon::before,
.front-page .poscom-top-results__pause-icon::before {
  left: 2px;
}

.home .poscom-top-results__pause-icon::after,
.front-page .poscom-top-results__pause-icon::after {
  right: 2px;
}

.home .poscom-top-results.is-paused .poscom-top-results__pause-icon::before,
.front-page .poscom-top-results.is-paused .poscom-top-results__pause-icon::before {
  top: 1px;
  left: 4px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  border-radius: 0;
  background: transparent;
}

.home .poscom-top-results.is-paused .poscom-top-results__pause-icon::after,
.front-page .poscom-top-results.is-paused .poscom-top-results__pause-icon::after {
  content: none;
}

.home .poscom-top-results__row,
.front-page .poscom-top-results__row {
  display: grid;
  grid-template-columns: clamp(126px, 9vw, 164px) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  gap: clamp(10px, 1.4vw, 22px);
}

.home .poscom-top-results__row-label,
.front-page .poscom-top-results__row-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.home .poscom-top-results__row-label span,
.front-page .poscom-top-results__row-label span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 16px 7px 11px;
  border-radius: 2px;
  color: #ffffff;
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.065em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  box-shadow:
    0 10px 20px rgba(6, 27, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}.home .poscom-top-results__row-label span,
.front-page .poscom-top-results__row-label span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 18px 7px 12px;
  border-radius: 2.4px;
  color: #ffffff;
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.075em;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  box-shadow:
    0 8px 18px rgba(6, 27, 58, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.home .poscom-top-results__row-label--company span,
.front-page .poscom-top-results__row-label--company span {
  background: linear-gradient(135deg, #061b3a, #008194);
}

.home .poscom-top-results__row-label--public span,
.front-page .poscom-top-results__row-label--public span {
  background: linear-gradient(135deg, #123a68, #16c6d3);
}

.home .poscom-top-results__viewport,
.front-page .poscom-top-results__viewport {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding-block: 6px;
}

.home .poscom-top-results__viewport::before,
.home .poscom-top-results__viewport::after,
.front-page .poscom-top-results__viewport::before,
.front-page .poscom-top-results__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: clamp(36px, 5vw, 82px);
  pointer-events: none;
}

.home .poscom-top-results__viewport::before,
.front-page .poscom-top-results__viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(250, 253, 253, 0.98), rgba(250, 253, 253, 0));
}

.home .poscom-top-results__viewport::after,
.front-page .poscom-top-results__viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(250, 253, 253, 0.98), rgba(250, 253, 253, 0));
}

.home .poscom-top-results__track,
.front-page .poscom-top-results__track {
  display: flex;
  width: max-content;
  animation: poscomTopResultsMarquee 46s linear infinite;
  will-change: transform;
}

.home .poscom-top-results__track--reverse,
.front-page .poscom-top-results__track--reverse {
  animation-name: poscomTopResultsMarqueeReverse;
  animation-duration: 58s;
}

.home .poscom-top-results.is-paused .poscom-top-results__track,
.front-page .poscom-top-results.is-paused .poscom-top-results__track {
  animation-play-state: paused;
}

.home .poscom-top-results__group,
.front-page .poscom-top-results__group {
  display: flex;
  align-items: center;
  gap: clamp(30px, 3.8vw, 58px);
  padding-inline: clamp(16px, 1.8vw, 30px);
}

.home .poscom-top-results__name,
.front-page .poscom-top-results__name {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(6, 27, 58, 0.88);
  font-size: clamp(18px, 1.42vw, 25px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.045em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.92);
}

.home .poscom-top-results__name::after,
.front-page .poscom-top-results__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(22, 198, 211, 0.78), rgba(6, 27, 58, 0.62));
  opacity: 0.48;
}

.home .poscom-top-results__note,
.front-page .poscom-top-results__note {
  margin: 0;
  color: rgba(6, 27, 58, 0.44);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: right;
}

@keyframes poscomTopResultsMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes poscomTopResultsMarqueeReverse {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .poscom-top-results__viewport,
  .front-page .poscom-top-results__viewport {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .home .poscom-top-results__track,
  .front-page .poscom-top-results__track {
    animation: none;
  }

  .home .poscom-top-results__group[aria-hidden="true"],
  .front-page .poscom-top-results__group[aria-hidden="true"] {
    display: none;
  }

  .home .poscom-top-results__pause,
  .front-page .poscom-top-results__pause {
    display: none;
  }
}

@media (max-width: 959px) {
  .home .poscom-top-results__inner,
  .front-page .poscom-top-results__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-inline: 22px;
  }

  .home .poscom-top-results__head,
  .front-page .poscom-top-results__head {
    padding: 24px 0 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(6, 27, 58, 0.08);
  }

  .home .poscom-top-results__marquee,
  .front-page .poscom-top-results__marquee {
    padding: 18px 0 22px;
  }

  .home .poscom-top-results__row,
  .front-page .poscom-top-results__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .home .poscom-top-results__track,
  .front-page .poscom-top-results__track {
    animation-duration: 60s;
  }

  .home .poscom-top-results__track--reverse,
  .front-page .poscom-top-results__track--reverse {
    animation-duration: 74s;
  }

  .home .poscom-top-results__note,
  .front-page .poscom-top-results__note {
    text-align: left;
  }
}



/* ======================================
  TOP Achievements
  主な対応実績カード
====================================== */

.poscom-front-achievements {
  position: relative;
  overflow: hidden;
}

.poscom-front-achievements .swell-block-fullWide__inner {
  position: relative;
  z-index: 1;
}

.poscom-front-achievements .is-style-section_ttl {
  color: #fff;
  text-align: center;
  letter-spacing: 0.08em;
}

.poscom-front-achievements .swell-block-columns__inner {
  align-items: stretch;
  gap: clamp(14px, 1.5vw, 24px);
}

.poscom-front-achievements .swell-block-column {
  display: flex;
  min-width: 0;
}

.poscom-front-achievements .swell-block-column > * {
  width: 100%;
}

.poscom-front-achieve-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: clamp(220px, 16vw, 280px);
  padding: clamp(18px, 1.35vw, 24px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(6, 27, 58, 0.075);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(246, 250, 252, 0.82) 100%
    );
  box-shadow:
    0 14px 34px rgba(6, 27, 58, 0.095),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
  transform: translateY(0);
}

/* 薄い背景画像 */
.poscom-front-achieve-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--achieve-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  filter: saturate(0.78) contrast(0.98);
  transform: scale(1.035);
}

/* 文字を読ませるための白いベール */
.poscom-front-achieve-card > * {
  position: relative;
  z-index: 2;
}

.poscom-front-achieve-card__category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 clamp(8px, 0.7vw, 12px);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(6, 27, 58, 0.075);
  color: #07496c;
  font-size: clamp(11px, 0.76vw, 13px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.poscom-front-achieve-card--dm .poscom-front-achieve-card__category {
  color: #07496c;
  background: rgba(7, 73, 108, 0.095);
}

.poscom-front-achieve-card--shipping .poscom-front-achieve-card__category {
  color: #0b655d;
  background: rgba(11, 101, 93, 0.095);
}

.poscom-front-achieve-card--guide .poscom-front-achieve-card__category {
  color: #825006;
  background: rgba(130, 80, 6, 0.11);
}

.poscom-front-achieve-card__title,
.poscom-front-achieve-card h3,
.poscom-front-achieve-card .wp-block-heading {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0.26em 0.22em 0.28em;
  border-radius: 6px;
  background:
    linear-gradient(
      90deg,
      rgba(231, 247, 249, 0.62) 0%,
      rgba(237, 249, 250, 0.48) 68%,
      rgba(255, 255, 255, 0) 100%
    );
  color: #061b3a;
  font-size: clamp(20px, 0.94vw, 21px);
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}

/* スマホだけ効かせる実績カードタイトル用の任意改行 */
.poscom-front-achievements .poscom-sp-title-br {
  display: none;
}

@media (max-width: 599px) {
  .poscom-front-achievements .poscom-sp-title-br {
    display: inline;
  }
}

.poscom-front-achieve-card__text {
  margin: clamp(14px, 0.96vw, 18px) 0 0;
  color: #26384f;
  font-size: clamp(13px, 0.86vw, 15px);
  font-weight: 600;
  line-height: 1.62;
  letter-spacing: 0.02em;
}

.poscom-front-achieve-card h3 + p,
.poscom-front-achieve-card .wp-block-heading + p {
  margin-top: clamp(12px, 0.95vw, 16px);
}

.poscom-front-achieve-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: clamp(10px, 0.9vw, 14px) 0 0;
  padding: 0;
  list-style: none;
}

.poscom-front-achieve-card__tags li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 27, 58, 0.075);
  color: #102944;
  font-size: clamp(10.5px, 0.68vw, 12px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.035em;
}

@media (min-width: 960px) {
  .poscom-front-achievements .swell-block-columns__inner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .poscom-front-achievements .swell-block-column {
    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;
  }
}

/* ======================================
  TOP Achievements Curtain Reveal
  JSが有効な時だけ薄い幕を出す
  ※GSAP非依存
====================================== */

/* JS準備完了後だけ、未表示カードに幕をかぶせる */
.is-poscom-achieve-curtain-ready .poscom-front-achievements .poscom-front-achieve-card.jsCurtainReveal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;

  /* 濃紺ベタ禁止。薄いガラス調の幕にする */
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(239, 248, 250, 0.96) 48%,
      rgba(213, 236, 238, 0.92) 100%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 0 46px rgba(83, 178, 187, 0.12);

  transform: translateX(0);
  transform-origin: right center;
  transition:
    transform 0.92s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.92s ease;
}

/* 薄幕の端にだけ少し色を入れる */
.is-poscom-achieve-curtain-ready .poscom-front-achievements .poscom-front-achieve-card.jsCurtainReveal:not(.is-revealed)::after {
  border-right: 3px solid rgba(83, 178, 187, 0.34);
}

/* めくれた状態 */
.is-poscom-achieve-curtain-ready .poscom-front-achievements .poscom-front-achieve-card.jsCurtainReveal.is-revealed::after {
  transform: translateX(104%);
  opacity: 0.98;
}

/* カード自体も少しだけ浮き上がる */
.is-poscom-achieve-curtain-ready .poscom-front-achievements .poscom-front-achieve-card.jsCurtainReveal {
  transform: translateY(10px);
  transition:
    transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.78s ease;
}

.is-poscom-achieve-curtain-ready .poscom-front-achievements .poscom-front-achieve-card.jsCurtainReveal.is-revealed {
  transform: translateY(0);
}

/* PC hover：控えめ */
@media (hover: hover) and (pointer: fine) {
  .poscom-front-achievements .poscom-front-achieve-card:hover {
    box-shadow:
      0 20px 42px rgba(6, 27, 58, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.76);
  }
}

/* ======================================
  TOP Achievements Responsive
  主な対応実績：PC3列 / TAB2列 / SP1列
====================================== */

/* タブレット：2列 */
@media (min-width: 600px) and (max-width: 959px) {
  #body_wrap.page-id-10 .poscom-front-achievements .swell-block-columns__inner,
  #body_wrap.home .poscom-front-achievements .swell-block-columns__inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    align-items: stretch;
  }

  #body_wrap.page-id-10 .poscom-front-achievements .swell-block-column,
  #body_wrap.home .poscom-front-achievements .swell-block-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: flex !important;
  }

  #body_wrap.page-id-10 .poscom-front-achievements .swell-block-column > *,
  #body_wrap.home .poscom-front-achievements .swell-block-column > * {
    width: 100%;
  }

  #body_wrap.page-id-10 .poscom-front-achievements .poscom-front-achieve-card,
  #body_wrap.home .poscom-front-achievements .poscom-front-achieve-card {
    height: 100%;
    min-height: 270px;
  }

  /* 最後のSP用スペーサーカラムはタブレットでは不要 */
  #body_wrap.page-id-10 .poscom-front-achievements .swell-block-columns__inner > .swell-block-column:last-child:has(.sp_only),
  #body_wrap.home .poscom-front-achievements .swell-block-columns__inner > .swell-block-column:last-child:has(.sp_only) {
    display: none !important;
  }

  .poscom-front-achieve-card {
    min-height: 270px;
    padding: 22px;
    border-radius: 19px;
  }

  .poscom-front-achieve-card__category {
    margin-bottom: 10px;
  }

  .poscom-front-achieve-card__title,
  .poscom-front-achieve-card h3,
  .poscom-front-achieve-card .wp-block-heading {
    font-size: 21px;
    line-height: 1.34;
  }

  .poscom-front-achieve-card__text {
    margin-top: 8px;
    font-size: 13.5px;
  }
}

/* スマホ：1列 */
@media (max-width: 599px) {
  #body_wrap.page-id-10 .poscom-front-achievements .swell-block-columns__inner,
  #body_wrap.home .poscom-front-achievements .swell-block-columns__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  #body_wrap.page-id-10 .poscom-front-achievements .swell-block-column,
  #body_wrap.home .poscom-front-achievements .swell-block-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .poscom-front-achieve-card {
    min-height: auto;
    padding: 20px;
    border-radius: 18px;
  }

  .poscom-front-achieve-card::before {
    opacity: 0.05;
    background-position: center bottom;
  }

  .poscom-front-achieve-card__category {
    margin-bottom: 9px;
  }

  #body_wrap.page-id-10 .poscom-front-achievements .poscom-front-achieve-card__title,
  #body_wrap.page-id-10 .poscom-front-achievements .poscom-front-achieve-card h3,
  #body_wrap.page-id-10 .poscom-front-achievements .poscom-front-achieve-card .wp-block-heading,
  #body_wrap.home .poscom-front-achievements .poscom-front-achieve-card__title,
  #body_wrap.home .poscom-front-achievements .poscom-front-achieve-card h3,
  #body_wrap.home .poscom-front-achievements .poscom-front-achieve-card .wp-block-heading {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;

    font-size: 20px !important;
    line-height: 1.34 !important;

    padding: 0.26em 0.22em 0.28em !important;
    border-radius: 6px !important;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    text-wrap: auto !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-break: strict !important;
  }

  .poscom-front-achieve-card__text {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.62;
  }

  .poscom-front-achieve-card__tags {
    margin-top: 10px;
  }
}

/* 動きを減らす設定ではカーテンを出さない */
@media (prefers-reduced-motion: reduce) {
  .is-poscom-achieve-curtain-ready .poscom-front-achievements .poscom-front-achieve-card.jsCurtainReveal {
    transform: none;
    transition: none;
  }

  .is-poscom-achieve-curtain-ready .poscom-front-achievements .poscom-front-achieve-card.jsCurtainReveal::after {
    display: none;
  }
}



/* ======================================
  TOP Lot / Deadline
  最小ロット数・納期 2カラム
====================================== */

.poscom-front-lot-deadline {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(83, 178, 187, 0.07), transparent 32%),
    linear-gradient(135deg, #ffffff 0%, #f6fafb 100%) !important;
}

.poscom-front-lot-deadline .swell-block-fullWide__inner {
  position: relative;
  z-index: 1;
}

.poscom-front-lot-deadline .poscom-release-title {
  margin-bottom: clamp(22px, 2.4vw, 36px) !important;
}

.poscom-front-lot-deadline .swell-block-columns__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
  align-items: stretch;
}

.poscom-front-lot-deadline .swell-block-column {
  display: flex;
  padding: 0 !important;
}

.poscom-front-lot-deadline .swell-block-column > * {
  width: 100%;
}

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

.poscom-front-lot-card {
  position: relative;
  display: flex;
  min-height: clamp(260px, 22vw, 340px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 6px;
  color: #061b3a;
}

.poscom-front-lot-card__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(26px, 2.6vw, 40px) clamp(24px, 2.5vw, 38px);
}

.poscom-front-lot-card__bgtext {
  position: absolute;
  top: -0.04em;
  left: clamp(18px, 2vw, 30px);
  z-index: 0;
  margin: 0;
  font-family: "Montserrat", "Arial", sans-serif;
  font-size: clamp(64px, 6.8vw, 110px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.poscom-front-lot-card__eyebrow {
  position: relative;
  z-index: 2;
  margin: 0 0 clamp(12px, 1vw, 16px);
  font-family: "Montserrat", "Arial", sans-serif;
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
}

.poscom-front-lot-card__title {
  margin: 0 0 clamp(18px, 1.8vw, 26px);
  font-size: clamp(18px, 1.65vw, 29px);
  font-weight: 900;
  line-height: 1.42;
  letter-spacing: 0.035em;
}

.poscom-front-lot-card__items {
  display: grid;
  gap: clamp(14px, 1.4vw, 22px);
}

.poscom-front-lot-card__item {
  position: relative;
  padding-left: 16px;
}

.poscom-front-lot-card__item::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.poscom-front-lot-card__label {
  margin: 0 0 5px;
  font-size: clamp(12px, 0.82vw, 14px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.poscom-front-lot-card__main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(58px, 4.4vw, 74px);
  margin: 0 0 10px;
  padding: 12px 16px 13px;
  overflow: hidden;
  border-radius: 14px;
  font-size: clamp(15px, 1.18vw, 22px);
  font-weight: 800;
  line-height: 1.48;
  letter-spacing: 0.03em;
  text-align: center;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  will-change: transform, box-shadow;
}

.poscom-front-lot-card__main::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -70%;
  width: 42%;
  height: 180%;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.12) 24%,
      rgba(255, 255, 255, 0.72) 50%,
      rgba(255, 255, 255, 0.14) 76%,
      transparent 100%
    );
  transform: skewX(-18deg) translateX(0);
  opacity: 0;
}

.poscom-front-lot-card__main strong {
  display: inline-block;
  font-size: 1.22em;
  font-weight: 900;
  letter-spacing: 0.01em;
  transform-origin: center bottom;
}

.poscom-front-lot-card--deadline .poscom-front-lot-card__main::after {
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(83, 178, 187, 0.05) 24%,
      rgba(83, 178, 187, 0.36) 50%,
      rgba(255, 255, 255, 0.72) 68%,
      transparent 100%
    );
}

.poscom-front-lot-card__main.is-lot-spotlight {
  animation: poscomLotMainLift 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.poscom-front-lot-card__main.is-lot-spotlight::after {
  animation: poscomLotShine 0.92s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.poscom-front-lot-card__main.is-lot-spotlight strong {
  animation: poscomLotStrongPop 0.62s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

@keyframes poscomLotMainLift {
  0% {
    transform: translateY(0);
  }

  42% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes poscomLotShine {
  0% {
    opacity: 0;
    transform: skewX(-18deg) translateX(0);
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: skewX(-18deg) translateX(360%);
  }
}

@keyframes poscomLotStrongPop {
  0% {
    filter: brightness(1);
    transform: translateY(0) scale(1);
  }

  45% {
    filter: brightness(1.12);
    transform: translateY(-1px) scale(1.08);
  }

  100% {
    filter: brightness(1);
    transform: translateY(0) scale(1);
  }
}

@media (hover: hover) and (pointer: fine) {
  .poscom-front-lot-card__main:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .poscom-front-lot-card__main,
  .poscom-front-lot-card__main::after,
  .poscom-front-lot-card__main strong {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.poscom-front-lot-card__text {
  margin: 0;
  font-size: clamp(13px, 0.88vw, 15px);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* ======================================
  Left Card
====================================== */

.poscom-front-lot-card--lot {
  background:
    linear-gradient(135deg, #f7fbfc 0%, #ffffff 100%);
  border: 1px solid rgba(6, 27, 58, 0.06);
}

.poscom-front-lot-card--lot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(135deg, rgba(83, 178, 187, 0.05), transparent 56%);
}

.poscom-front-lot-card--lot .poscom-front-lot-card__bgtext {
  color: rgba(6, 27, 58, 0.055);
}

.poscom-front-lot-card--lot .poscom-front-lot-card__eyebrow,
.poscom-front-lot-card--lot .poscom-front-lot-card__label {
  color: #0b7a83;
}

.poscom-front-lot-card--lot .poscom-front-lot-card__title {
  color: #061b3a;
}

.poscom-front-lot-card--lot .poscom-front-lot-card__main {
  background: linear-gradient(135deg, #08244a 0%, #10345d 100%);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(6, 27, 58, 0.10);
}

.poscom-front-lot-card--lot .poscom-front-lot-card__main strong {
  color: #b8f1ed;
}

.poscom-front-lot-card--lot .poscom-front-lot-card__text {
  color: rgba(6, 27, 58, 0.78);
}

.poscom-front-lot-card--lot .poscom-front-lot-card__item::before {
  background: #0b7a83;
  box-shadow: 0 0 0 4px rgba(11, 122, 131, 0.14);
}

/* ======================================
  Right Card
  ※明るすぎる青をやめて、深い紺＋青緑寄りへ
====================================== */

.poscom-front-lot-card--deadline {
  background:
    linear-gradient(135deg, #0b2344 0%, #10345d 56%, #16506a 100%);
  color: #ffffff;
  border: 1px solid rgba(6, 27, 58, 0.05);
}

.poscom-front-lot-card--deadline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 22%, rgba(255, 255, 255, 0.10), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 60%);
}

.poscom-front-lot-card--deadline .poscom-front-lot-card__bgtext {
  color: rgba(255, 255, 255, 0.14);
}

.poscom-front-lot-card--deadline .poscom-front-lot-card__eyebrow,
.poscom-front-lot-card--deadline .poscom-front-lot-card__label {
  color: #9fe5e1;
}

.poscom-front-lot-card--deadline .poscom-front-lot-card__title {
  color: #ffffff;
}

.poscom-front-lot-card--deadline .poscom-front-lot-card__main {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(232, 247, 245, 0.96) 100%
    );
  color: #08244a;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.poscom-front-lot-card--deadline .poscom-front-lot-card__main strong {
  color: #0b7a83;
}

.poscom-front-lot-card--deadline .poscom-front-lot-card__text {
  color: rgba(255, 255, 255, 0.88);
}

.poscom-front-lot-card--deadline .poscom-front-lot-card__item::before {
  background: #9fe5e1;
  box-shadow: 0 0 0 4px rgba(159, 229, 225, 0.14);
}

/* ======================================
  TOP Lot / Deadline Responsive
  タブレット・スマホ1列 / 横はみ出し防止 / 余白再設計
====================================== */

/*
  PCは触らない。
  959px以下だけ、最小ロット数・納期セクションを1列にする。
*/
@media (max-width: 959px) {
  #body_wrap.home .poscom-front-lot-deadline,
  #body_wrap.page-id-10 .poscom-front-lot-deadline {
    --poscom-lot-shell-width: min(720px, calc(100vw - 36px));
    --poscom-lot-card-pad-y: 28px;
    --poscom-lot-card-pad-x: 26px;
    --poscom-lot-card-gap: 18px;
    --poscom-lot-title-gap: 16px;

    overflow: hidden !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  /* フルワイド内側を、画面幅いっぱいではなく少し余白つきで中央に置く */
  #body_wrap.home .poscom-front-lot-deadline > .swell-block-fullWide__inner,
  #body_wrap.page-id-10 .poscom-front-lot-deadline > .swell-block-fullWide__inner {
    width: var(--poscom-lot-shell-width) !important;
    max-width: var(--poscom-lot-shell-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
  }

  /* 見出しもカード幅に合わせる */
  #body_wrap.home .poscom-front-lot-deadline .poscom-release-title,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-release-title {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 20px !important;
    text-align: left !important;
  }

  /* SWELLリッチカラムの横余白をこのセクションだけ無効化 */
  #body_wrap.home .poscom-front-lot-deadline .swell-block-columns,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .swell-block-columns {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    --swl-clmn-mrgn--x: 0rem !important;
    --swl-clmn-mrgn--y: 0rem !important;
  }

  /* タブレット・スマホは必ず1列 */
  #body_wrap.home .poscom-front-lot-deadline .swell-block-columns__inner,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .swell-block-columns__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--poscom-lot-card-gap) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .swell-block-column,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .swell-block-column {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    flex-basis: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .swell-block-column > *,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .swell-block-column > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3つ目のSP用スペーサーカラムは不要 */
  #body_wrap.home .poscom-front-lot-deadline .swell-block-columns__inner > .swell-block-column:nth-child(n + 3),
  #body_wrap.page-id-10 .poscom-front-lot-deadline .swell-block-columns__inner > .swell-block-column:nth-child(n + 3) {
    display: none !important;
  }

  /* カード本体 */
  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__inner,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: var(--poscom-lot-card-pad-y) var(--poscom-lot-card-pad-x) !important;
    box-sizing: border-box !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__bgtext,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__bgtext {
    left: 18px !important;
    max-width: calc(100% - 36px) !important;
    font-size: clamp(58px, 12vw, 96px) !important;
    line-height: 1 !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__eyebrow,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__eyebrow {
    margin-bottom: 22px !important;
  }

  /* 「小ロットから〜」「短納期の案件も〜」下の余白を詰める */
  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__title,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__title {
    margin: 0 0 var(--poscom-lot-title-gap) !important;
    font-size: clamp(20px, 3.2vw, 28px) !important;
    line-height: 1.42 !important;
    letter-spacing: 0.06em !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__items,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__items {
    display: grid !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__item,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__label,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__label {
    margin-bottom: 8px !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__main,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    font-size: clamp(17px, 2.6vw, 22px) !important;
    line-height: 1.35 !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__text,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__text {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    font-size: clamp(13px, 2vw, 15px) !important;
    line-height: 1.65 !important;
    box-sizing: border-box !important;
  }
}

/* スマホだけさらに最適化 */
@media (max-width: 599px) {
  #body_wrap.home .poscom-front-lot-deadline,
  #body_wrap.page-id-10 .poscom-front-lot-deadline {
    --poscom-lot-shell-width: min(420px, calc(100vw - 30px));
    --poscom-lot-card-pad-y: 24px;
    --poscom-lot-card-pad-x: 18px;
    --poscom-lot-card-gap: 16px;
    --poscom-lot-title-gap: 14px;

    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-release-title,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-release-title {
    margin-bottom: 18px !important;
    font-size: clamp(28px, 8.2vw, 38px) !important;
    line-height: 1.16 !important;
    letter-spacing: 0.08em !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__bgtext,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__bgtext {
    left: 14px !important;
    max-width: calc(100% - 28px) !important;
    font-size: clamp(54px, 16vw, 72px) !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__eyebrow,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__eyebrow {
    margin-bottom: 18px !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__title,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__title {
    font-size: clamp(19px, 5.3vw, 23px) !important;
    line-height: 1.45 !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__items,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__items {
    gap: 16px !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__main,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__main {
    padding: 13px 14px !important;
    font-size: clamp(16px, 4.35vw, 18px) !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__main strong,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__main strong {
    font-size: 1.12em !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__text,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__text {
    font-size: 13px !important;
    line-height: 1.62 !important;
  }
}

/* さらに狭いスマホ */
@media (max-width: 374px) {
  #body_wrap.home .poscom-front-lot-deadline,
  #body_wrap.page-id-10 .poscom-front-lot-deadline {
    --poscom-lot-shell-width: min(100%, calc(100vw - 24px));
    --poscom-lot-card-pad-x: 16px;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-release-title,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-release-title {
    font-size: 27px !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__main,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__main {
    font-size: 16px !important;
    line-height: 1.38 !important;
  }

  #body_wrap.home .poscom-front-lot-deadline .poscom-front-lot-card__main strong,
  #body_wrap.page-id-10 .poscom-front-lot-deadline .poscom-front-lot-card__main strong {
    font-size: 1.1em !important;
  }
}


/* ======================================
  TEMP FIX
  Lot / Deadline 左カードの背景差別化
  ※Codex復旧後に TOP Lot / Deadline ブロックへ統合
====================================== */

.poscom-front-lot-deadline .poscom-front-lot-card--lot {
  background:
    linear-gradient(
      135deg,
      rgba(239, 248, 250, 0.98) 0%,
      rgba(247, 251, 252, 0.98) 48%,
      rgba(255, 255, 255, 0.98) 100%
    ) !important;
  border: 1px solid rgba(6, 27, 58, 0.13) !important;
  box-shadow:
    0 18px 42px rgba(6, 27, 58, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 左カード内に、ほんの少しだけ青緑の面を足す */
.poscom-front-lot-deadline .poscom-front-lot-card--lot::before {
  background:
    radial-gradient(circle at 16% 14%, rgba(83, 178, 187, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(83, 178, 187, 0.075), transparent 58%) !important;
}

/* LOTの薄い英字も少しだけ見せる */
.poscom-front-lot-deadline .poscom-front-lot-card--lot .poscom-front-lot-card__bgtext {
  color: rgba(6, 27, 58, 0.085) !important;
}

/* 左カードの中身を少しだけ前に出す */
.poscom-front-lot-deadline .poscom-front-lot-card--lot .poscom-front-lot-card__inner {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18),
      rgba(255, 255, 255, 0)
    );
}

/* ======================================
  TEMP FIX
  Lot / Deadline 2カードの影と立体感調整
  ※Codex復旧後に TOP Lot / Deadline ブロックへ統合
====================================== */

/* 左右カード共通：面として浮かせる */
.poscom-front-lot-deadline .poscom-front-lot-card {
  box-shadow:
    0 22px 48px rgba(6, 27, 58, 0.10),
    0 8px 20px rgba(6, 27, 58, 0.055) !important;
}

/* 左カード：白背景なので境界と薄い影で分離 */
.poscom-front-lot-deadline .poscom-front-lot-card--lot {
  border: 1px solid rgba(6, 27, 58, 0.14) !important;
  box-shadow:
    0 22px 48px rgba(6, 27, 58, 0.095),
    0 8px 20px rgba(6, 27, 58, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* 右カード：濃紺なので、重くなりすぎない青紺影＋内側ハイライト */
.poscom-front-lot-deadline .poscom-front-lot-card--deadline {
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 26px 56px rgba(6, 27, 58, 0.18),
    0 10px 24px rgba(6, 27, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045) !important;
}

/* 右カード上部にほんの少し光を足して、板っぽさを消す */
.poscom-front-lot-deadline .poscom-front-lot-card--deadline::before {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.14), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(83, 178, 187, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 62%) !important;
}

/* ======================================
  TOP Contact Section Compact SP
  TOP下部お問い合わせ導線：スマホ・タブレットだけ小型化
====================================== */

@media (max-width: 959px) {
  #body_wrap.home .poscom-top-contact-section,
  #body_wrap.front-page .poscom-top-contact-section,
  #body_wrap.page-id-10 .poscom-top-contact-section {
    margin-bottom: 28px !important;
    overflow: hidden;
  }

  #body_wrap.home .poscom-top-contact-section > .swell-block-fullWide__SVG.-bottom,
  #body_wrap.front-page .poscom-top-contact-section > .swell-block-fullWide__SVG.-bottom,
  #body_wrap.page-id-10 .poscom-top-contact-section > .swell-block-fullWide__SVG.-bottom {
    display: none !important;
  }

  #body_wrap.home .poscom-top-contact-section > .swell-block-fullWide__inner,
  #body_wrap.front-page .poscom-top-contact-section > .swell-block-fullWide__inner,
  #body_wrap.page-id-10 .poscom-top-contact-section > .swell-block-fullWide__inner {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    margin-inline: auto !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-grid,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-grid,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(100%, 580px) !important;
    max-width: calc(100vw - 24px) !important;
    gap: 28px !important;
    margin: 18px auto 34px !important;
    padding: 0 !important;
    transform: none !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__head,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__head,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__head {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: center !important;
    margin-bottom: 16px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.home .poscom-top-contact-section .contact-3d-object,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.front-page .poscom-top-contact-section .contact-3d-object,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-3d-object {
    width: 72px !important;
    max-width: 72px !important;
    margin: 0 auto !important;
  }

  #body_wrap.home .poscom-top-contact-section h2.wp-block-heading.poscom-ttl-gradient.contact-method-card__title,
  #body_wrap.front-page .poscom-top-contact-section h2.wp-block-heading.poscom-ttl-gradient.contact-method-card__title,
  #body_wrap.page-id-10 .poscom-top-contact-section h2.wp-block-heading.poscom-ttl-gradient.contact-method-card__title {
    margin: 0 !important;
    font-size: 43px !important;
    line-height: 1 !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main {
    font-size: 43px !important;
    line-height: 1 !important;
    letter-spacing: 0.16em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub {
    margin-top: 0.36em !important;
    font-size: 22px !important;
    line-height: 1.32 !important;
    letter-spacing: 0.1em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__body,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__body,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__body {
    min-height: 136px !important;
    padding: 22px 17px 23px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__lead,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__lead,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__lead {
    margin-bottom: 0.7em !important;
    font-size: 14.5px !important;
    line-height: 1.52 !important;
    letter-spacing: 0.025em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__main,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__main,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__main {
    font-size: 30px !important;
    line-height: 1.12 !important;
    letter-spacing: 0.006em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__main--tel,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__main--tel,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__main--tel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.18em !important;
    white-space: nowrap !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__tel-icon,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__tel-icon,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__tel-icon {
    width: 0.7em !important;
    height: 0.7em !important;
    flex: 0 0 0.7em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__tel-text,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__tel-text,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__tel-text {
    white-space: nowrap !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__main--mail,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__main--mail,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__main--mail {
    max-width: 100% !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__note,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__note,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__note {
    margin-top: 0.62em !important;
    font-size: 12.5px !important;
    line-height: 1.44 !important;
    letter-spacing: 0.015em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card--mail .contact-method-card__main--mail,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card--mail .contact-method-card__main--mail,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card--mail .contact-method-card__main--mail {
    margin-bottom: 17px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card--mail .contact-method-card__note,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card--mail .contact-method-card__note,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card--mail .contact-method-card__note {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.38 !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card--mail .contact-method-card__note + .contact-method-card__note,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card--mail .contact-method-card__note + .contact-method-card__note,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card--mail .contact-method-card__note + .contact-method-card__note {
    margin-top: 0.18em !important;
  }
}

@media (max-width: 600px) {
  #body_wrap.home .poscom-top-contact-section .swell-block-fullWide.pc-py-20.sp-py-20,
  #body_wrap.front-page .poscom-top-contact-section .swell-block-fullWide.pc-py-20.sp-py-20,
  #body_wrap.page-id-10 .poscom-top-contact-section .swell-block-fullWide.pc-py-20.sp-py-20 {
    padding-top: 18px !important;
    padding-bottom: 24px !important;
  }

  #body_wrap.home .poscom-top-contact-section p.sp_only.lh140,
  #body_wrap.front-page .poscom-top-contact-section p.sp_only.lh140,
  #body_wrap.page-id-10 .poscom-top-contact-section p.sp_only.lh140 {
    margin-bottom: 8px !important;
    font-size: 24px !important;
    line-height: 1.28 !important;
    letter-spacing: 0.05em !important;
  }

  #body_wrap.home .poscom-top-contact-section p.sp_only.lh150,
  #body_wrap.front-page .poscom-top-contact-section p.sp_only.lh150,
  #body_wrap.page-id-10 .poscom-top-contact-section p.sp_only.lh150 {
    font-size: 15px !important;
    line-height: 1.64 !important;
    letter-spacing: 0.04em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-grid,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-grid,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-grid {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    gap: 26px !important;
    margin-top: 16px !important;
    margin-bottom: 30px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__head,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__head,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__head {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 15px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.home .poscom-top-contact-section .contact-3d-object,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.front-page .poscom-top-contact-section .contact-3d-object,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-3d-object {
    width: 64px !important;
    max-width: 64px !important;
  }

  #body_wrap.home .poscom-top-contact-section h2.wp-block-heading.poscom-ttl-gradient.contact-method-card__title,
  #body_wrap.front-page .poscom-top-contact-section h2.wp-block-heading.poscom-ttl-gradient.contact-method-card__title,
  #body_wrap.page-id-10 .poscom-top-contact-section h2.wp-block-heading.poscom-ttl-gradient.contact-method-card__title {
    font-size: 39px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main {
    font-size: 39px !important;
    letter-spacing: 0.15em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub {
    margin-top: 0.34em !important;
    font-size: 19.5px !important;
    line-height: 1.32 !important;
    letter-spacing: 0.09em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__body,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__body,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__body {
    min-height: 124px !important;
    padding: 19px 14px 20px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__lead,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__lead,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__lead {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__main,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__main,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__main {
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__main--tel,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__main--tel,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__main--tel {
    gap: 0.16em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card--tel .contact-method-card__main--tel,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card--tel .contact-method-card__main--tel,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card--tel .contact-method-card__main--tel {
    font-size: 27.5px !important;
    letter-spacing: -0.01em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card--tel .contact-method-card__tel-link,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card--tel .contact-method-card__tel-link,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card--tel .contact-method-card__tel-link {
    gap: 0.14em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__main--mail,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__main--mail,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__main--mail {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__note,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__note,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__note {
    font-size: 11.8px !important;
    line-height: 1.42 !important;
  }
}

@media (max-width: 374px) {
  #body_wrap.home .poscom-top-contact-section .contact-method-card__head,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__head,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__head {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.home .poscom-top-contact-section .contact-3d-object,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.front-page .poscom-top-contact-section .contact-3d-object,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card .contact-3d-object,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-3d-object {
    width: 58px !important;
    max-width: 58px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__main {
    font-size: 36px !important;
    letter-spacing: 0.13em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__title .poscom-ttl-gradient__sub {
    font-size: 18px !important;
    letter-spacing: 0.075em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__main,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__main,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__main {
    font-size: 24px !important;
    letter-spacing: 0 !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card--tel .contact-method-card__main--tel,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card--tel .contact-method-card__main--tel,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card--tel .contact-method-card__main--tel {
    font-size: 25px !important;
    letter-spacing: -0.015em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card--tel .contact-method-card__tel-link,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card--tel .contact-method-card__tel-link,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card--tel .contact-method-card__tel-link {
    gap: 0.12em !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__main--mail,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__main--mail,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__main--mail {
    font-size: 16.8px !important;
  }

  #body_wrap.home .poscom-top-contact-section .contact-method-card__note,
  #body_wrap.front-page .poscom-top-contact-section .contact-method-card__note,
  #body_wrap.page-id-10 .poscom-top-contact-section .contact-method-card__note {
    font-size: 11px !important;
  }
}

/* ======================================
  TOP Flow SP/TAB List Centering
  SP専用HTML：チェックリスト全体を中央寄せ
====================================== */

@media (max-width: 959px) {
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list {
    width: min(100%, 760px);
    max-width: calc(100vw - 36px);
    margin-inline: auto !important;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list > .swell-block-columns__inner,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list > .swell-block-columns__inner {
    align-items: center;
  }

  /* 右側テキストブロックを、カラム内で中央に置く */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list .wp-block-group,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list .wp-block-group {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto !important;
  }

  /* 見出しもリスト幅に合わせて左揃え */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list h3.wp-block-heading,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list h3.wp-block-heading {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px !important;
    text-align: left;
    line-height: 1.2 !important;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list h3.wp-block-heading em,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list h3.wp-block-heading em {
    display: inline-block;
    margin-bottom: 4px;
    line-height: 1 !important;
  }

  /* ul全体を中央寄せ。ただし中身は左揃え */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left;
  }

  /* SWELLのチェックリストを、チェック列＋本文列で揃える */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li {
    position: relative;
    display: grid !important;
    grid-template-columns: 1.35em minmax(0, auto);
    column-gap: 0.58em;
    align-items: start;
    width: fit-content;
    max-width: 100%;
    margin: 0 !important;
    padding: 7px 0 !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
    letter-spacing: 0.03em;
    text-align: left;
  }

  /* SWELLチェックマークの位置をgrid列に合わせる */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li::before,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li::before {
    position: static !important;
    display: inline-block !important;
    grid-column: 1;
    grid-row: 1;
    margin: 0.12em 0 0 !important;
    transform: none !important;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li > span,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li > span,
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li > .swl-fz,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li > .swl-fz {
    grid-column: 2;
    min-width: 0;
    font-size: 1em !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
}

@media (max-width: 600px) {
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list {
    max-width: calc(100vw - 28px);
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list > .swell-block-columns__inner,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list > .swell-block-columns__inner {
    row-gap: 14px;
  }

  /* スマホでは見出し＋リストを少し広めに取る */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list .wp-block-group,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list .wp-block-group {
    width: min(100%, 31em);
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list h3.wp-block-heading,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list h3.wp-block-heading {
    margin-bottom: 10px !important;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list {
    width: fit-content;
    max-width: 100%;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li {
    grid-template-columns: 1.3em minmax(0, auto);
    column-gap: 0.5em;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    font-size: 14px !important;
    line-height: 1.38 !important;
  }
}

@media (max-width: 374px) {
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list .wp-block-group,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list .wp-block-group {
    width: min(100%, 29em);
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list li {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* ======================================
  TOP Flow SP/TAB H3 Heading
  01〜05 見出しのみ調整
====================================== */

@media (max-width: 959px) {
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__title,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__title {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.22em 0.42em;
    width: 100%;
    margin: 0 0 18px !important;
    padding: 0;
    color: #061b3a;
    text-align: center;
    line-height: 1.08 !important;
    letter-spacing: 0.04em;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__num,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__num {
    display: inline-block;
    color: #082b5e;
    font-family: "Montserrat", "Arial", sans-serif;
    font-size: clamp(40px, 7.2vw, 58px);
    font-weight: 900;
    font-style: italic;
    line-height: 0.95;
    letter-spacing: 0.01em;
    transform: skewX(-8deg);
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.95),
      0 8px 20px rgba(6, 27, 58, 0.10);
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__label,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__label {
    display: inline-block;
    color: #202833;
    font-size: clamp(21px, 3.7vw, 29px);
    font-weight: 900;
    line-height: 1.16;
    letter-spacing: 0.045em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
  }
}

@media (max-width: 600px) {
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__title,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__title {
    margin-bottom: 16px !important;
    gap: 0.18em 0.34em;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__num,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__num {
    font-size: clamp(42px, 11.5vw, 56px);
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__label,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__label {
    font-size: clamp(22px, 6vw, 29px);
  }
}

@media (max-width: 374px) {
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__num,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__num {
    font-size: 40px;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__label,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__label {
    font-size: 21px;
  }
}

/* ======================================
  TOP Flow Image Adjust
  画像装飾はPC/TAB/SP共通
====================================== */

/* Flow画像：PC/TAB/SPすべてに薄い枠・4px角丸・弱い影 */
#body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-image img,
#body_wrap.home .poscom-flow-scroll .poscom-flow-image img,
#body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-mobile-item__image img,
#body_wrap.home .poscom-flow-scroll .poscom-flow-mobile-item__image img {
  border: 1px solid rgba(6, 27, 58, 0.12) !important;
  border-radius: 4px !important;
  box-shadow:
    0 8px 20px rgba(6, 27, 58, 0.07),
    0 1px 3px rgba(6, 27, 58, 0.06) !important;
}

/* ======================================
  TOP Flow SP List Column Gap
  リストカラム下だけ余白：画像とリスト間は触らない
====================================== */

@media (max-width: 600px) {
  /* まず過去の線・paddingを完全に消す */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list::after,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list ul.wp-block-list::after {
    content: none !important;
    display: none !important;
  }

  /* 画像＋H3側のカラムには余白を付けない */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list .swell-block-column:has(.poscom-flow-mobile-item__title),
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list .swell-block-column:has(.poscom-flow-mobile-item__title) {
    margin-bottom: 0 !important;
  }

  /*
    SP構造は
    1: H3+画像
    2: リスト
    3: H3+画像
    4: リスト
    ...
    なので偶数カラムの下だけ空ける
  */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list .swell-block-columns__inner > .swell-block-column:nth-child(even),
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list .swell-block-columns__inner > .swell-block-column:nth-child(even) {
    margin-bottom: 12px !important;
  }

  /* 最後のリストカラムだけは次セクションとの余白を増やしすぎない */
  #body_wrap.page-id-10 .poscom-flow-scroll .poscom-flow-sp-list .swell-block-columns__inner > .swell-block-column:last-child,
  #body_wrap.home .poscom-flow-scroll .poscom-flow-sp-list .swell-block-columns__inner > .swell-block-column:last-child {
    margin-bottom: 0 !important;
  }
}

/* ======================================
  TOP Business Files SP/TAB Horizontal Scroll
  SP/TAB専用：PC版 .poscom-strength-horizontal は触らない
====================================== */

@media (min-width: 960px) {
  .poscom-biz-scroll-sp {
    display: none !important;
  }
}

@media (max-width: 959px) {
  .poscom-biz-scroll-sp {
    --poscom-biz-card-ratio: 1200 / 1499;
    --poscom-biz-card-w: clamp(286px, 78vw, 370px);
    --poscom-biz-gap: clamp(14px, 4vw, 22px);

    position: relative;
    z-index: 2;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background:
      linear-gradient(
        135deg,
        rgba(83, 178, 187, 0.12) 0%,
        rgba(247, 250, 252, 0.96) 38%,
        #ffffff 100%
      ) !important;
    isolation: isolate;
  }

  .poscom-biz-scroll-sp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 18% 18%, rgba(36, 210, 216, 0.13), transparent 34%),
      radial-gradient(circle at 88% 78%, rgba(11, 44, 94, 0.10), transparent 38%);
    opacity: 0.9;
  }

  .poscom-biz-scroll-sp > .swell-block-fullWide__inner {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .poscom-biz-scroll-sp__pin {
    position: relative;
    display: grid;
    align-content: start;
    gap: clamp(10px, 1.8svh, 18px);
    width: 100%;
    min-height: 0;
    height: auto;
    padding-top: clamp(34px, 6svh, 58px);
    padding-bottom: 0;
    overflow: hidden;
  }

  .poscom-biz-scroll-sp__head {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .poscom-biz-scroll-sp__title {
    width: min(100%, 760px);
    margin: 0 auto !important;
    padding-inline: clamp(18px, 5vw, 36px);
    text-align: left;
  }

  .poscom-biz-scroll-sp__viewport {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding:
      clamp(8px, 1.8svh, 16px)
      max(12px, calc((100vw - var(--poscom-biz-card-w)) / 2))
      clamp(42px, 6svh, 64px);
  }

  .poscom-biz-scroll-sp__viewport::-webkit-scrollbar {
    display: none;
  }

  .poscom-biz-scroll-sp.is-gsap-ready .poscom-biz-scroll-sp__viewport {
    overflow: hidden;
    scroll-snap-type: none;
  }

  .poscom-biz-scroll-sp__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: var(--poscom-biz-gap);
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  /*
    重要：
    テキストカードも画像カードも、必ず同じ幅・同じ比率にする。
    SP用画像が 1200×1499 なので、全カードを aspect-ratio: 1200 / 1499 で統一。
  */
  .poscom-biz-scroll-sp__card {
    flex: 0 0 var(--poscom-biz-card-w) !important;
    width: var(--poscom-biz-card-w) !important;
    aspect-ratio: var(--poscom-biz-card-ratio) !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    scroll-snap-align: center;
    overflow: hidden;
    border: 1px solid rgba(11, 44, 94, 0.12);
    background: #ffffff;
    box-shadow:
      0 18px 44px rgba(6, 27, 58, 0.13),
      0 1px 0 rgba(255, 255, 255, 0.86) inset;
  }

  .poscom-biz-scroll-sp__card--text {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(20px, 5vw, 32px);
    color: #ffffff;
    background: #061b3a !important;
  }

  .poscom-biz-scroll-sp__card--text::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.11), transparent 34%),
      linear-gradient(120deg, rgba(255, 255, 255, 0.065), transparent 56%);
    opacity: 0.8;
  }

  .poscom-biz-scroll-sp__card--text::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    height: 34%;
    pointer-events: none;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(216, 236, 235, 0.22) 100%
      );
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    opacity: 0.72;
  }

  .poscom-biz-scroll-sp__card-inner {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: calc(100% - clamp(12px, 3.2vw, 20px));
    min-width: 0;
    box-sizing: border-box;
    margin-left: clamp(12px, 3.2vw, 20px);
  }

  .poscom-biz-scroll-sp__heading {
    display: grid;
    gap: clamp(7px, 1.7vw, 10px);
    margin: 0 0 clamp(13px, 3vw, 18px) !important;
  }

  .poscom-biz-scroll-sp__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.36em;
    padding: 0.1em 0.44em 0.06em;
    color: #ffffff !important;
    background:
      linear-gradient(
        135deg,
        #24d2d8 0%,
        #16aebc 48%,
        #087c96 100%
      ) !important;
    font-family: "Montserrat", "Arial", sans-serif;
    font-size: clamp(23px, 6.8vw, 33px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    box-shadow:
      0 10px 24px rgba(0, 160, 176, 0.28),
      0 0 0 1px rgba(255, 255, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.34);
  }

  .poscom-biz-scroll-sp__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.44em;
    padding: 0.16em 0.34em 0.08em;
    color: #061b3a !important;
    background:
      linear-gradient(
        135deg,
        #ffffff 0%,
        #edfafa 42%,
        #c6edf0 100%
      ) !important;
    font-size: clamp(25px, 7.8vw, 38px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.045em;
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.18),
      0 0 0 1px rgba(83, 178, 187, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .poscom-biz-scroll-sp__lead {
    margin: 0 0 clamp(12px, 3vw, 18px) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    font-size: clamp(12.6px, 3.45vw, 15px);
    font-weight: 800;
    line-height: 1.54;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
  }

  .poscom-biz-scroll-sp__list {
    display: grid;
    gap: clamp(7px, 2vw, 11px);
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .poscom-biz-scroll-sp__list li {
    display: grid;
    grid-template-columns: 1.15em 1fr;
    align-items: center;
    gap: 0.72em;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(13.2px, 3.55vw, 16.5px);
    font-weight: 900;
    line-height: 1.38;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.16);
  }

  .poscom-biz-scroll-sp__list li span {
    display: block;
    width: 0.64em;
    height: 0.64em;
    border-radius: 999px;
    background:
      linear-gradient(
        135deg,
        #24d2d8 0%,
        #53b2bb 100%
      );
    box-shadow: 0 0 0 5px rgba(83, 178, 187, 0.16);
  }

  .poscom-biz-scroll-sp__card--image {
    display: grid;
    place-items: center;
    padding: 0;
    background:
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(244, 250, 251, 0.98) 100%
      ) !important;
  }

  .poscom-biz-scroll-sp__card--image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center center;
    border: 0;
    border-radius: 0;
  }

  .poscom-biz-scroll-sp__card--reason-text .poscom-biz-scroll-sp__lead {
    font-size: clamp(12.2px, 3.25vw, 14.5px);
  }

  .poscom-biz-scroll-sp__card--reason-text .poscom-biz-scroll-sp__list li {
    font-size: clamp(12.4px, 3.25vw, 15.5px);
  }
}

@media (min-width: 601px) and (max-width: 959px) {
  .poscom-biz-scroll-sp {
    --poscom-biz-card-w: clamp(360px, 52vw, 480px);
    --poscom-biz-gap: clamp(18px, 3vw, 28px);
  }

  .poscom-biz-scroll-sp__pin {
    min-height: 0;
    height: auto;
    padding-top: clamp(38px, 5.5svh, 64px);
    padding-bottom: 0;
  }

  .poscom-biz-scroll-sp__viewport {
    padding:
      clamp(8px, 1.8svh, 16px)
      max(24px, calc((100vw - var(--poscom-biz-card-w)) / 2))
      clamp(48px, 6svh, 72px);
  }

  .poscom-biz-scroll-sp__card--text {
    padding: clamp(28px, 4vw, 44px);
  }

  .poscom-biz-scroll-sp__num {
    font-size: clamp(30px, 4.8vw, 42px);
  }

  .poscom-biz-scroll-sp__label {
    font-size: clamp(34px, 5.4vw, 48px);
  }

  .poscom-biz-scroll-sp__lead {
    font-size: clamp(14.5px, 2.1vw, 17px);
  }

  .poscom-biz-scroll-sp__list li {
    font-size: clamp(15.5px, 2.4vw, 19px);
  }
}

@media (min-width: 601px) and (max-width: 959px) and (min-height: 720px) {
  .poscom-biz-scroll-sp {
    --poscom-biz-card-w: clamp(400px, min(56vw, 54svh), 520px);
    --poscom-biz-gap: clamp(20px, 3.2vw, 30px);
  }

  .poscom-biz-scroll-sp__pin {
    min-height: 100svh;
    height: auto;
    align-content: center;
    gap: clamp(18px, 2.4svh, 28px);
    padding-top: clamp(20px, 3svh, 40px);
    padding-bottom: clamp(48px, 6svh, 78px);
  }

  .poscom-biz-scroll-sp__viewport {
    padding:
      clamp(10px, 1.6svh, 18px)
      max(28px, calc((100vw - var(--poscom-biz-card-w)) / 2))
      clamp(34px, 4svh, 54px);
  }

  .poscom-biz-scroll-sp__head,
  .poscom-biz-scroll-sp__viewport {
    transform: translate3d(0, -24px, 0);
  }
}

@media (max-width: 374px) {
  .poscom-biz-scroll-sp {
    --poscom-biz-card-w: clamp(270px, 82vw, 300px);
    --poscom-biz-gap: 13px;
  }

  .poscom-biz-scroll-sp__pin {
    min-height: 0;
    height: auto;
    padding-top: 28px;
    padding-bottom: 0;
  }

  .poscom-biz-scroll-sp__viewport {
    padding:
      8px
      max(12px, calc((100vw - var(--poscom-biz-card-w)) / 2))
      44px;
  }

  .poscom-biz-scroll-sp__card--text {
    padding: 18px;
  }

  .poscom-biz-scroll-sp__label {
    font-size: clamp(22px, 7.2vw, 30px);
  }

  .poscom-biz-scroll-sp__lead {
    font-size: 12px;
    line-height: 1.5;
  }

  .poscom-biz-scroll-sp__list {
    gap: 6px;
  }

  .poscom-biz-scroll-sp__list li {
    font-size: 12.2px;
    gap: 0.62em;
  }
}

/* ======================================
  TOP Business Files SP/TAB to Release Gap Fix
  Business Files と Free Your Core Business の白い隙間を消す
  PCは触らない
====================================== */

@media (max-width: 959px) {
  /*
    Business Files自体の外側余白はゼロ固定。
    カード下の内側余白は viewport 側で作るため、ここでは外側余白を作らない。
  */
  .poscom-biz-scroll-sp {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /*
    Business Files直後のブロックに付く上余白を消す。
    SWELL / Gutenberg のブロック間margin対策。
  */
  .poscom-biz-scroll-sp + * {
    margin-top: 0 !important;
  }

  /*
    次が Free Your Core Business セクションの場合は確実に密着させる。
  */
  .poscom-biz-scroll-sp + .poscom-release-section,
  .poscom-biz-scroll-sp + .swell-block-fullWide.poscom-release-section,
  .poscom-biz-scroll-sp + .wp-block-group.poscom-release-section,
  .poscom-release-section {
    margin-top: 0 !important;
  }

  /*
    SWELLのフルワイド内側に余計な上余白が入る場合の保険。
    セクション背景はフルワイドでそのまま始めたい。
  */
  .poscom-release-section > .swell-block-fullWide__inner {
    margin-top: 0 !important;
  }

  /*
    1px程度の白い線が残る場合の保険。
    上へ1pxだけ重ねて、フルワイド同士を確実に接続する。
  */
  .poscom-release-section {
    transform: translateY(-1px);
  }
}

/* ======================================
  TOP Release SP/TAB Scroll Story
  Free Your Core Business SP専用
  PC版 .poscom-release-section は触らない
====================================== */

@media (min-width: 960px) {
  .poscom-release-sp {
    display: none !important;
  }
}

@media (max-width: 959px) {
  .poscom-release-sp {
    --release-sp-navy: #061b3a;
    --release-sp-blue: #0b2c5e;
    --release-sp-cyan: #24d2d8;
    --release-sp-teal: #53b2bb;
    --release-sp-bg: #f7fbfb;
    --release-sp-safe-bottom: clamp(84px, 13svh, 126px);
    --release-sp-head-top: clamp(24px, 4.5svh, 46px);
    --release-sp-scene-top: clamp(118px, 19svh, 158px);

    position: relative;
    z-index: 2;
    display: block !important;

    /*
      外側フルワイドのinnerにl-articleが付いていても、
      SP版セクションだけは画面幅いっぱいに逃がす。
    */
    width: 100vw;
    max-width: none;
    margin: 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden;
    color: var(--release-sp-navy);
    background:
      radial-gradient(circle at 84% 26%, rgba(36, 210, 216, 0.12), transparent 30%),
      radial-gradient(circle at 12% 80%, rgba(83, 178, 187, 0.12), transparent 38%),
      linear-gradient(135deg, rgba(238, 250, 251, 0.96) 0%, #ffffff 42%, rgba(237, 249, 249, 0.94) 100%);
    isolation: isolate;
  }

  .poscom-release-sp::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(115deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.28) 48%, rgba(83, 178, 187, 0.10)),
      radial-gradient(circle at 78% 74%, rgba(36, 210, 216, 0.16), transparent 26%);
    opacity: 0.95;
  }

  .poscom-release-sp__stage {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    width: 100%;
    overflow: hidden;
    padding: var(--release-sp-head-top) 0 var(--release-sp-safe-bottom);
    box-sizing: border-box;
  }

  .poscom-release-sp__head {
    position: relative;
    z-index: 20;
    width: 100%;
    padding-inline: clamp(16px, 5vw, 34px);
    text-align: center;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__head {
    position: absolute;
    top: var(--release-sp-head-top);
    left: 0;
    right: 0;
  }

  .poscom-release-sp__title {
    width: min(100%, 760px);
    margin: 0 auto !important;
  }

  .poscom-release-sp__scene {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: clamp(24px, 5svh, 42px);
    padding-inline: clamp(16px, 5vw, 34px);
    box-sizing: border-box;
  }

  /*
    GSAP有効時は全シーンを同じ舞台に重ねる。
    表示・非表示はJS側のautoAlphaで制御する。
  */
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene {
    position: absolute;
    top: var(--release-sp-scene-top);
    right: 0;
    bottom: var(--release-sp-safe-bottom);
    left: 0;
    display: grid;
    place-items: center;
    width: 100%;
    margin: 0;
    padding-inline: clamp(16px, 5vw, 34px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards {
    top: calc(var(--release-sp-scene-top) + clamp(12px, 2.2svh, 22px));
  }

  .poscom-release-sp__scene--cards,
  .poscom-release-sp__scene--logo {
    isolation: isolate;
  }

  .poscom-release-sp__scene--logo {
    z-index: 1;
  }

  .poscom-release-sp__scene--cards {
    z-index: 2;
  }

  /* ======================================
    Scene 1：散らばるカード
  ====================================== */

  .poscom-release-sp__cards {
    display: grid;
    gap: 14px;
    width: min(100%, 390px);
    margin-inline: auto;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__cards {
    position: relative;
    width: min(100%, 430px);
    height: min(60svh, 540px);
    margin-inline: auto;
  }

  .poscom-release-sp-card {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 92px;
    padding: 16px 18px;
    border: 1px solid rgba(6, 27, 58, 0.18);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
      0 18px 40px rgba(6, 27, 58, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    text-align: center;
    transform-origin: 50% 50%;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(190px, 58vw, 300px);
    min-height: clamp(104px, 15svh, 132px);
    margin: 0;
  }

  .poscom-release-sp-card__inner {
    display: grid;
    place-items: center;
    gap: 10px;
  }

  .poscom-release-sp-card__icon {
    display: block;
    width: clamp(54px, 15vw, 82px);
    height: clamp(54px, 15vw, 82px);
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(6, 27, 58, 0.14));
  }

  .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: clamp(76px, 24vw, 116px);
    height: clamp(42px, 13vw, 66px);
    border-radius: 12px;
    object-fit: cover;
  }

  .poscom-release-sp-card__title {
    margin: 0 !important;
    color: var(--release-sp-navy) !important;
    font-size: clamp(18px, 5vw, 25px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.08em;
  }

  /* ======================================
    Scene 2：ロゴ
  ====================================== */

  .poscom-release-sp-logo {
    position: relative;
    width: min(88vw, 460px);
    margin: 0 auto !important;
    padding: clamp(10px, 3vw, 18px);
    border: 1px solid rgba(83, 178, 187, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow:
      0 28px 70px rgba(6, 27, 58, 0.14),
      0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    backdrop-filter: blur(10px);
    transform-origin: 50% 50%;
  }

  .poscom-release-sp-logo::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: -1;
    border-radius: 30px;
    background: radial-gradient(circle, rgba(36, 210, 216, 0.18), transparent 62%);
    filter: blur(10px);
  }

  .poscom-release-sp-logo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
  }

  /* ======================================
    Scene 3：SP縦長ビジュアル
  ====================================== */

  .poscom-release-sp-visual {
    width: min(82vw, 420px);
    margin: 0 auto !important;
    filter:
      drop-shadow(0 24px 46px rgba(6, 27, 58, 0.12))
      drop-shadow(0 2px 5px rgba(6, 27, 58, 0.08));
  }

  .poscom-release-sp-visual img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(62svh, 620px);
    object-fit: contain;
  }

  /* ======================================
    Scene 4-1：Before
  ====================================== */

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before {
    top: calc(var(--release-sp-scene-top) + clamp(54px, 8.5svh, 88px));
  }

  .poscom-release-sp-before,
  .poscom-release-sp-after {
    width: min(100%, 430px);
    margin-inline: auto;
    text-align: center;
  }

  .poscom-release-sp-before__label,
  .poscom-release-sp-after__label {
    margin: 0 0 10px !important;
    color: rgba(6, 27, 58, 0.72);
    font-size: clamp(15px, 4vw, 20px);
    font-weight: 900;
    letter-spacing: 0.16em;
  }

  .poscom-release-sp-before__title,
  .poscom-release-sp-after__title {
    margin: 0 0 18px !important;
    color: var(--release-sp-navy) !important;
    font-size: clamp(21px, 6.2vw, 32px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.04em;
  }

  .poscom-release-sp-before {
    display: grid;
    align-content: start;
    width: min(100%, 448px);
    min-height: min(62svh, 560px);
    margin-inline: auto;
    padding-top: 0;
    text-align: center;
  }

  .poscom-release-sp-before__label {
    margin-bottom: clamp(5px, 1svh, 9px) !important;
  }

  .poscom-release-sp-before__title {
    margin-bottom: clamp(8px, 1.4svh, 12px) !important;
  }

  .poscom-release-sp-task-pile {
    position: relative;
    display: block;
    width: min(100%, 448px);
    height: clamp(390px, 51svh, 500px);
    min-height: 0;
    margin: 0 auto;
    padding: 0;
  }

  .poscom-release-sp-task {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: auto;
    min-height: 2.05em;
    padding: 0.38em 0.78em;
    border: 1px solid rgba(11, 44, 94, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
      0 10px 24px rgba(6, 27, 58, 0.11),
      0 1px 0 rgba(255, 255, 255, 0.92) inset;
    color: var(--release-sp-navy);
    font-size: clamp(9.4px, 2.48vw, 11.8px);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 0.025em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
  }

  .poscom-release-sp-task.task--front {
    z-index: 5;
    background: rgba(255, 255, 255, 0.98);
    box-shadow:
      0 14px 32px rgba(6, 27, 58, 0.14),
      0 1px 0 rgba(255, 255, 255, 0.96) inset;
  }

  .poscom-release-sp:not(.is-gsap-ready) .poscom-release-sp-task-pile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: auto;
    min-height: clamp(270px, 43svh, 390px);
    padding: 8px;
  }

  .poscom-release-sp:not(.is-gsap-ready) .poscom-release-sp-task {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }

  /* ======================================
    Scene 4-2：Bridge
  ====================================== */

  .poscom-release-sp-bridge {
    display: grid;
    place-items: center;
    gap: clamp(14px, 3.2svh, 24px);
    width: min(100%, 430px);
    margin-inline: auto;
    text-align: center;
  }

  .poscom-release-sp-bridge__eyebrow {
    margin: 0 !important;
    color: rgba(6, 27, 58, 0.50);
    font-size: clamp(13px, 3.4vw, 16px);
    font-weight: 900;
    letter-spacing: 0.18em;
  }

  .poscom-release-sp-bridge__text {
    display: grid;
    place-items: center;
    gap: 0.22em;
    width: min(82vw, 360px);
    min-height: clamp(92px, 14svh, 122px);
    margin: 0 !important;
    padding: 18px 24px;
    border: 1px solid rgba(36, 210, 216, 0.42);
    border-radius: 999px;
    color: var(--release-sp-navy);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(242, 253, 253, 0.9));
    box-shadow:
      0 22px 52px rgba(6, 27, 58, 0.12),
      0 0 0 7px rgba(36, 210, 216, 0.055);
    font-size: clamp(22px, 6.4vw, 30px);
    font-weight: 950;
    line-height: 1.22;
    letter-spacing: 0.055em;
  }

  .poscom-release-sp-bridge__text span {
    display: block;
  }

  .poscom-release-sp-bridge__flow {
    display: grid;
    justify-items: center;
    gap: 0;
    margin-top: 16px;
  }

  .poscom-release-sp-bridge__node {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: var(--release-sp-cyan);
    box-shadow:
      0 0 0 8px rgba(36, 210, 216, 0.12),
      0 0 22px rgba(36, 210, 216, 0.38);
  }

  .poscom-release-sp-bridge__line {
    display: block;
    width: 2px;
    height: clamp(116px, 22svh, 180px);
    margin-top: 12px;
    background:
      linear-gradient(to bottom, rgba(36, 210, 216, 0), var(--release-sp-cyan), var(--release-sp-blue));
    transform-origin: top center;
  }

  .poscom-release-sp-bridge__arrow {
    display: block;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-right: 3px solid var(--release-sp-blue);
    border-bottom: 3px solid var(--release-sp-blue);
    transform: rotate(45deg);
    filter: drop-shadow(0 8px 14px rgba(6, 27, 58, 0.16));
  }

  /* ======================================
    Scene 4-3：After
  ====================================== */

  .poscom-release-sp-after {
    padding-top: clamp(16px, 3.8svh, 34px);
  }

  .poscom-release-sp-after__label {
    margin-bottom: clamp(14px, 2.6svh, 22px) !important;
  }

  .poscom-release-sp-after__title {
    margin-bottom: clamp(20px, 3.8svh, 30px) !important;
  }

  .poscom-release-sp-after__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(10px, 2.2svh, 14px);
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .poscom-release-sp-after__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(48px, 7.4svh, 62px);
    padding: 11px 18px;
    border-radius: 10px;
    color: #ffffff;
    background: var(--release-sp-navy);
    box-shadow: 0 14px 30px rgba(6, 27, 58, 0.16);
    font-size: clamp(15px, 4.1vw, 18px);
    font-weight: 900;
    letter-spacing: 0.05em;
  }

  .poscom-release-sp-after__item:first-child,
  .poscom-release-sp-after__item:last-child {
    position: relative;
    z-index: 0;
    isolation: isolate;
    border: 2px solid rgba(80, 255, 190, 0.86);
    background:
      linear-gradient(135deg, #061b3a 0%, #0b2c5e 62%, #083f56 100%);
    box-shadow:
      0 16px 34px rgba(6, 27, 58, 0.18),
      0 0 0 5px rgba(80, 255, 190, 0.09),
      0 0 22px rgba(80, 255, 190, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }

  .poscom-release-sp-after__item:first-child::before,
  .poscom-release-sp-after__item:last-child::before {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border-radius: inherit;
    background:
      linear-gradient(
        135deg,
        rgba(80, 255, 190, 0.24),
        rgba(36, 210, 216, 0.13),
        transparent
      );
    filter: blur(8px);
    opacity: 0.9;
  }

  /* ======================================
    Scene 5：Final Copy
  ====================================== */

  .poscom-release-sp-copy {
    position: relative;
    width: min(100%, 560px);
    margin-inline: auto;
    text-align: center;
    transform: translateY(clamp(0px, 0.8svh, 8px));
  }

  .poscom-release-sp-copy::before {
    content: "SPEED UP";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    color: rgba(6, 27, 58, 0.045);
    font-size: clamp(68px, 21vw, 124px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    opacity: 0.82;
    pointer-events: none;
  }

  .poscom-release-sp-copy__small {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .poscom-release-sp-copy__text {
    display: grid;
    gap: clamp(24px, 4.2svh, 36px);
    margin: 0 !important;
    color: var(--release-sp-navy) !important;
    font-weight: 950;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-align: center;
  }

  .poscom-release-sp-copy__text span,
  .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp-copy__text span:last-child,
  .poscom-release-sp-copy__text span:nth-child(1),
  .poscom-release-sp-copy__text span:nth-child(2) {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--release-sp-navy) !important;
    white-space: nowrap;
  }

  .poscom-release-sp-copy__text span:first-child {
    font-size: clamp(38px, 10.4vw, 64px);
  }

  .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(39px, 10.8vw, 66px);
  }

  .poscom-release-sp-copy__text span::before,
  .poscom-release-sp-copy__text span::after,
  .poscom-release-sp-copy__text span:first-child::before,
  .poscom-release-sp-copy__text span:first-child::after,
  .poscom-release-sp-copy__text span:last-child::before,
  .poscom-release-sp-copy__text span:last-child::after {
    content: none !important;
    display: none !important;
  }
}

@media (min-width: 400px) and (max-width: 459px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] {
    top: calc(var(--release-sp-scene-top) + clamp(54px, 8.5svh, 88px) - 14px) !important;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--after,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] {
    top: calc(var(--release-sp-scene-top) - 36px) !important;
  }

  .poscom-release-sp-after {
    padding-top: clamp(8px, 1.6svh, 14px);
  }

  .poscom-release-sp-after__label {
    margin-bottom: clamp(5px, 0.8svh, 8px) !important;
  }

}

@media (max-width: 374px) {
  .poscom-release-sp {
    --release-sp-safe-bottom: 96px;
    --release-sp-scene-top: 112px;
  }

  .poscom-release-sp-card {
    padding: 14px 16px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    width: clamp(176px, 64vw, 270px);
  }

  .poscom-release-sp-card__title {
    font-size: 17px;
  }

  .poscom-release-sp-task {
    font-size: 10px;
    padding-inline: 0.68em;
  }

  .poscom-release-sp-copy__text span:first-child {
    font-size: clamp(33px, 9.7vw, 48px);
    letter-spacing: -0.035em;
  }

  .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(34px, 10vw, 50px);
    letter-spacing: -0.035em;
  }

  .poscom-release-sp-copy::before {
    font-size: clamp(58px, 19vw, 96px);
  }
}

@media (min-width: 361px) and (max-width: 390px) and (max-height: 700px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] {
    top: calc(var(--release-sp-scene-top) + 28px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card {
    width: clamp(146px, 40vw, 154px);
    max-width: 154px;
    min-height: clamp(100px, 15svh, 108px);
    aspect-ratio: 1.38 / 1;
    padding: 8px 9px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__inner,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__inner {
    gap: 5px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__icon {
    width: clamp(38px, 11vw, 44px);
    height: clamp(38px, 11vw, 44px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--stock .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: clamp(54px, 16vw, 62px);
    height: clamp(31px, 9vw, 36px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__title,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__title {
    font-size: clamp(13.5px, 3.7vw, 15px);
    line-height: 1.16;
    letter-spacing: 0.025em;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp__cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp__cards {
    width: min(100%, calc(100vw - 10px));
    height: min(43svh, 286px);
    transform: translate3d(0, 11px, 0);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(1),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(1) {
    top: calc(50% + 34px);
    left: calc(50% - 8px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(2),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(2) {
    top: calc(50% + 30px);
    left: calc(50% + 8px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(3),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(3) {
    left: calc(50% - 14px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(4),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(4) {
    top: calc(50% - 18px);
    left: calc(50% + 14px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(5),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(5) {
    top: calc(50% - 40px);
  }

  .poscom-release-sp-visual {
    width: min(76vw, 286px);
  }

  .poscom-release-sp-visual img {
    width: auto;
    max-width: 100%;
    max-height: min(52svh, 346px);
    margin-inline: auto;
  }

  .poscom-release-sp-bridge {
    gap: 9px;
    width: min(100%, 318px);
  }

  .poscom-release-sp-bridge__eyebrow {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .poscom-release-sp-bridge__text {
    box-sizing: border-box;
    width: min(100%, 292px);
    min-height: 84px;
    padding: 12px 18px;
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: 0.04em;
  }

  .poscom-release-sp-bridge__flow {
    margin-top: 5px;
  }

  .poscom-release-sp-bridge__node {
    width: 12px;
    height: 12px;
    box-shadow:
      0 0 0 6px rgba(36, 210, 216, 0.11),
      0 0 18px rgba(36, 210, 216, 0.34);
  }

  .poscom-release-sp-bridge__line {
    height: 96px;
    margin-top: 8px;
  }

  .poscom-release-sp-bridge__arrow {
    width: 20px;
    height: 20px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] {
    top: calc(var(--release-sp-scene-top) - 2px);
    bottom: calc(var(--release-sp-safe-bottom) + 30px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-after {
    transform: translate3d(0, -6px, 0);
  }

  .poscom-release-sp-after {
    width: min(100%, 318px);
    padding-top: 0;
  }

  .poscom-release-sp-after__label {
    margin-bottom: 5px !important;
    font-size: 13px;
    letter-spacing: 0.14em;
  }

  .poscom-release-sp-after__title {
    margin-bottom: 8px !important;
    font-size: 19px;
    line-height: 1.22;
  }

  .poscom-release-sp-after__grid {
    width: min(100%, 312px);
    gap: 5px;
  }

  .poscom-release-sp-after__item {
    box-sizing: border-box;
    min-height: 38px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.16;
    letter-spacing: 0.035em;
  }
}

@media (max-width: 360px) {
  .poscom-release-sp-visual {
    width: min(75vw, 274px);
  }

  .poscom-release-sp-visual img {
    width: auto;
    max-width: 100%;
    max-height: min(50svh, 320px);
    margin-inline: auto;
  }

  .poscom-release-sp-bridge {
    gap: 8px;
    width: min(100%, 306px);
  }

  .poscom-release-sp-bridge__text {
    width: min(100%, 280px);
    min-height: 78px;
    padding: 11px 16px;
    font-size: 19px;
    line-height: 1.16;
  }

  .poscom-release-sp-bridge__flow {
    margin-top: 4px;
  }

  .poscom-release-sp-bridge__line {
    height: 86px;
    margin-top: 7px;
  }

  .poscom-release-sp-bridge__arrow {
    width: 18px;
    height: 18px;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] {
    top: calc(var(--release-sp-scene-top) - 4px);
    bottom: calc(var(--release-sp-safe-bottom) + 30px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-after {
    transform: translate3d(0, -8px, 0);
  }

  .poscom-release-sp-after {
    width: min(100%, 306px);
    padding-top: 5px;
  }

  .poscom-release-sp-after__label {
    margin-bottom: 5px !important;
  }

  .poscom-release-sp-after__title {
    margin-bottom: 8px !important;
  }

  .poscom-release-sp-after__grid {
    width: min(100%, 296px);
    gap: 5px;
  }

  .poscom-release-sp-after__item {
    box-sizing: border-box;
    min-height: 36px;
    padding: 5px 10px;
    font-size: 12.8px;
    line-height: 1.18;
  }
}

@media (max-width: 340px) {
  .poscom-release-sp-visual {
    width: min(74vw, 252px);
  }

  .poscom-release-sp-visual img {
    max-height: min(48svh, 300px);
  }

  .poscom-release-sp-bridge {
    gap: 7px;
  }

  .poscom-release-sp-bridge__text {
    width: min(100%, 268px);
    min-height: 74px;
    padding: 10px 14px;
    font-size: 18px;
  }

  .poscom-release-sp-bridge__line {
    height: 78px;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] {
    top: calc(var(--release-sp-scene-top) - 6px);
    bottom: calc(var(--release-sp-safe-bottom) + 32px);
  }

  .poscom-release-sp-after__title {
    margin-bottom: 7px !important;
  }

  .poscom-release-sp-after__grid {
    width: min(100%, 286px);
    gap: 5px;
  }

  .poscom-release-sp-after__item {
    box-sizing: border-box;
    min-height: 35px;
    padding: 5px 9px;
    font-size: 12.5px;
  }
}

@media (max-width: 959px) {
  .poscom-release-sp .poscom-release-sp-copy__small {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 959px) {
  .poscom-release-sp .poscom-release-sp-copy {
    position: relative;
    width: min(100%, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    margin-inline: auto;
    overflow: visible;
    text-align: center;
  }

  .poscom-release-sp .poscom-release-sp-copy::before {
    content: "SPEED UP";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    max-width: 100vw;
    color: rgba(6, 27, 58, 0.045);
    font-size: clamp(58px, 18vw, 108px);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    opacity: 0.82;
    pointer-events: none;
  }

  .poscom-release-sp .poscom-release-sp-copy__small {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .poscom-release-sp .poscom-release-sp-copy__text {
    display: grid;
    gap: clamp(22px, 3.7svh, 32px);
    width: 100%;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    color: var(--release-sp-navy) !important;
    font-weight: 950;
    line-height: 1.12;
    text-align: center;
  }

  .poscom-release-sp .poscom-release-sp-copy__text span,
  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--release-sp-navy) !important;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    letter-spacing: -0.055em;
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:first-child {
    font-size: clamp(31px, 8.25vw, 42px);
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(31px, 8.25vw, 42px);
  }

  .poscom-release-sp .poscom-release-sp-copy__text span::before,
  .poscom-release-sp .poscom-release-sp-copy__text span::after,
  .poscom-release-sp .poscom-release-sp-copy__text span:first-child::before,
  .poscom-release-sp .poscom-release-sp-copy__text span:first-child::after,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child::before,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 390px) {
  .poscom-release-sp .poscom-release-sp-copy {
    width: min(100%, calc(100vw - 22px));
    max-width: calc(100vw - 22px);
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(29px, 7.9vw, 34px);
    letter-spacing: -0.075em;
  }

  .poscom-release-sp .poscom-release-sp-copy::before {
    font-size: clamp(52px, 17vw, 86px);
  }
}

@media (max-width: 350px) {
  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(24px, 8.45vw, 27px);
    letter-spacing: -0.09em;
  }
}

@media (max-width: 959px) {
  .poscom-release-sp {
    overflow-x: hidden;
  }

  .poscom-release-sp-card,
  .poscom-release-sp-task,
  .poscom-release-sp-copy {
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }
}

@media (max-width: 320px) {
  .poscom-release-sp {
    --release-sp-safe-bottom: 104px;
    --release-sp-scene-top: 108px;
  }

  .poscom-release-sp__stage {
    padding-bottom: var(--release-sp-safe-bottom);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene {
    bottom: var(--release-sp-safe-bottom);
    padding-inline: 10px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards {
    top: calc(var(--release-sp-scene-top) + 8px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__cards {
    width: calc(100vw - 16px);
    height: min(50svh, 300px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    width: calc(100vw - 96px);
    max-width: calc(100vw - 96px);
    min-height: 88px;
    padding: 11px 12px;
  }

  .poscom-release-sp-card__inner {
    gap: 6px;
  }

  .poscom-release-sp-card__icon {
    width: clamp(42px, 14vw, 52px);
    height: clamp(42px, 14vw, 52px);
  }

  .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: clamp(62px, 21vw, 74px);
    height: clamp(34px, 11vw, 42px);
  }

  .poscom-release-sp-card__title {
    font-size: 15px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before {
    top: calc(var(--release-sp-scene-top) + 38px);
  }

  .poscom-release-sp-before {
    width: calc(100vw - 16px);
    min-height: min(55svh, 312px);
  }

  .poscom-release-sp-before__label {
    font-size: 12px;
  }

  .poscom-release-sp-before__title {
    margin-bottom: 4px !important;
    font-size: 17px;
    line-height: 1.25;
  }

  .poscom-release-sp-task-pile {
    width: calc(100vw - 12px);
    height: min(44svh, 260px);
  }

  .poscom-release-sp-task {
    max-width: calc(100vw - 152px);
    padding: 0.32em 0.62em;
    font-size: 8.8px;
    line-height: 1.05;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .poscom-release-sp-logo,
  .poscom-release-sp-visual,
  .poscom-release-sp-bridge,
  .poscom-release-sp-after,
  .poscom-release-sp-copy {
    max-width: calc(100vw - 24px);
  }

  .poscom-release-sp-visual {
    width: min(72vw, 230px);
  }

  .poscom-release-sp-visual img {
    width: auto;
    max-width: 100%;
    max-height: min(47svh, 266px);
    margin-inline: auto;
  }

  .poscom-release-sp-bridge__text {
    box-sizing: border-box;
    width: min(100%, 260px);
    min-height: 70px;
    padding: 9px 12px;
    font-size: 17px;
    line-height: 1.15;
  }

  .poscom-release-sp-bridge__flow {
    margin-top: 3px;
  }

  .poscom-release-sp-bridge__line {
    height: 68px;
    margin-top: 6px;
  }

  .poscom-release-sp-bridge__arrow {
    width: 16px;
    height: 16px;
    border-right-width: 2px;
    border-bottom-width: 2px;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] {
    top: calc(var(--release-sp-scene-top) - 6px);
    bottom: calc(var(--release-sp-safe-bottom) + 34px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-after {
    transform: translate3d(0, -8px, 0);
  }

  .poscom-release-sp-after {
    padding-top: 4px;
  }

  .poscom-release-sp-after__label {
    margin-bottom: 5px !important;
    font-size: 12px;
  }

  .poscom-release-sp-after__title {
    margin-bottom: 7px !important;
    font-size: 17px;
  }

  .poscom-release-sp-after__grid {
    width: min(100%, 280px);
    gap: 5px;
  }

  .poscom-release-sp-after__item {
    box-sizing: border-box;
    min-height: 34px;
    padding: 5px 8px;
    font-size: 12.5px;
    line-height: 1.16;
    letter-spacing: 0.02em;
  }

  .poscom-release-sp .poscom-release-sp-copy {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .poscom-release-sp .poscom-release-sp-copy__text {
    gap: 18px;
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: 27px;
    letter-spacing: -0.09em;
  }

  .poscom-release-sp .poscom-release-sp-copy::before {
    max-width: calc(100vw - 8px);
    font-size: 50px;
  }
}

/* ======================================
  TOP Release SP Card Size Rebalance
  カード自体を縮めて見切れ・重なり過多を防ぐ
====================================== */

@media (max-width: 959px) {
  .poscom-release-sp .poscom-release-sp__cards {
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    margin-inline: auto;
    overflow: visible;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card,
  .poscom-release-sp .poscom-release-sp-card {
    width: clamp(190px, 58vw, 248px);
    max-width: calc(100vw - 32px);
    min-height: clamp(104px, 15svh, 136px);
    padding: clamp(12px, 2.8vw, 18px) clamp(14px, 3.2vw, 20px);
    overflow: visible;
  }

  .poscom-release-sp .poscom-release-sp-card__inner {
    gap: clamp(6px, 1.6vw, 10px);
  }

  .poscom-release-sp .poscom-release-sp-card__icon {
    width: clamp(48px, 13vw, 68px);
    height: clamp(48px, 13vw, 68px);
  }

  .poscom-release-sp .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: clamp(72px, 22vw, 104px);
    height: clamp(40px, 12vw, 58px);
  }

  .poscom-release-sp .poscom-release-sp-card__title {
    position: relative;
    z-index: 2;
    font-size: clamp(16px, 4.7vw, 21px);
    line-height: 1.18;
    letter-spacing: 0.045em;
    white-space: nowrap;
  }
}

@media (min-width: 400px) and (max-width: 459px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card,
  .poscom-release-sp .poscom-release-sp-card {
    width: clamp(210px, 54vw, 238px);
    min-height: clamp(108px, 14svh, 130px);
    padding: 14px 17px;
  }

  .poscom-release-sp .poscom-release-sp-card__title {
    font-size: clamp(17px, 4.3vw, 20px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card {
    width: clamp(162px, 40vw, 178px);
    max-width: 178px;
    min-height: clamp(110px, 14svh, 122px);
    aspect-ratio: 1.42 / 1;
    padding: 9px 11px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp__cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp__cards {
    width: min(100%, calc(100vw - 14px));
    height: min(46svh, 332px);
    transform: translate3d(0, 8px, 0);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__inner,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__inner {
    gap: 6px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__icon {
    width: clamp(42px, 10.8vw, 50px);
    height: clamp(42px, 10.8vw, 50px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--stock .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: clamp(60px, 15vw, 72px);
    height: clamp(34px, 8.5vw, 40px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__title,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__title {
    font-size: clamp(14.5px, 3.6vw, 16.5px);
    line-height: 1.16;
    letter-spacing: 0.025em;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(1),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(1) {
    top: calc(50% + 42px);
    left: calc(50% - 10px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(2),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(2) {
    top: calc(50% + 38px);
    left: calc(50% + 10px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(3),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(3) {
    left: calc(50% - 16px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(4),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(4) {
    top: calc(50% - 26px);
    left: calc(50% + 16px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(5),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(5) {
    top: calc(50% - 50px);
  }
}

@media (max-width: 374px) {
  .poscom-release-sp .poscom-release-sp__cards {
    width: min(100%, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card,
  .poscom-release-sp .poscom-release-sp-card {
    width: clamp(156px, 52vw, 176px);
    max-width: calc(100vw - 22px);
    min-height: clamp(82px, 13svh, 102px);
    padding: 9px 11px;
  }

  .poscom-release-sp .poscom-release-sp-card__inner {
    gap: 4px;
  }

  .poscom-release-sp .poscom-release-sp-card__icon {
    width: clamp(38px, 12vw, 48px);
    height: clamp(38px, 12vw, 48px);
  }

  .poscom-release-sp .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: clamp(54px, 19vw, 72px);
    height: clamp(30px, 10vw, 42px);
  }

  .poscom-release-sp .poscom-release-sp-card__title {
    font-size: clamp(13px, 4.15vw, 15.5px);
    letter-spacing: 0.025em;
  }
}

@media (max-width: 959px) {
  .poscom-release-sp,
  .poscom-release-sp__stage,
  .poscom-release-sp__scene {
    overflow-x: hidden;
  }

  .poscom-release-sp__scene {
    max-width: 100vw;
  }

  .poscom-release-sp-task-pile {
    max-width: calc(100vw - 18px);
    overflow: hidden;
  }

  .poscom-release-sp .poscom-release-sp-copy__text span,
  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto !important;
    overflow: visible;
  }

  .poscom-release-sp .poscom-release-sp-copy__text span::before,
  .poscom-release-sp .poscom-release-sp-copy__text span:first-child::before,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child::before {
    content: none !important;
    display: none !important;
  }

  .poscom-release-sp .poscom-release-sp-copy__text span::after,
  .poscom-release-sp .poscom-release-sp-copy__text span:first-child::after,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child::after {
    content: "" !important;
    position: absolute;
    right: 0;
    bottom: -0.16em;
    left: 0;
    display: block !important;
    width: 100%;
    height: clamp(3px, 0.8vw, 5px);
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      rgba(80, 255, 190, 0.94),
      rgba(36, 210, 216, 0.96)
    ) !important;
    box-shadow: 0 4px 12px rgba(36, 210, 216, 0.18);
    transform: none;
    opacity: 1;
    pointer-events: none;
  }
}

@media (max-width: 430px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    width: calc(100vw - 136px);
    max-width: calc(100vw - 136px);
  }

  .poscom-release-sp-task-pile {
    width: calc(100vw - 18px);
    height: min(50svh, 340px);
  }

  .poscom-release-sp-task {
    max-width: 144px;
    padding: 0.36em 0.68em;
    font-size: 9.6px;
    letter-spacing: 0;
  }
}

@media (min-width: 400px) and (max-width: 459px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] {
    top: calc(var(--release-sp-scene-top) + 24px) !important;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card {
    width: clamp(162px, 40vw, 178px);
    max-width: 178px;
    min-height: clamp(110px, 14svh, 122px);
    aspect-ratio: 1.42 / 1;
    padding: 9px 11px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp__cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp__cards {
    width: min(100%, calc(100vw - 14px));
    height: min(46svh, 332px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(1),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(1) {
    top: calc(50% - 10px);
    left: calc(50% - 10px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(2),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(2) {
    top: calc(50% - 6px);
    left: calc(50% + 10px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(3),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(3) {
    left: calc(50% - 16px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(4),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(4) {
    top: calc(50% + 12px);
    left: calc(50% + 16px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(5),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(5) {
    top: calc(50% + 18px);
  }
}

@media (max-width: 390px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] {
    top: calc(var(--release-sp-scene-top) + 24px) !important;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    width: calc(100vw - 132px);
    max-width: calc(100vw - 132px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card {
    width: clamp(146px, 40vw, 154px);
    max-width: 154px;
    min-height: clamp(100px, 15svh, 108px);
    aspect-ratio: 1.38 / 1;
    padding: 8px 9px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp__cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp__cards {
    width: min(100%, calc(100vw - 10px));
    height: min(43svh, 286px);
  }

  .poscom-release-sp-task {
    max-width: 136px;
    font-size: 9.4px;
  }
}

@media (max-width: 374px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    width: calc(100vw - 124px);
    max-width: calc(100vw - 124px);
  }

  .poscom-release-sp-task-pile {
    width: calc(100vw - 18px);
    height: min(48svh, 310px);
  }

  .poscom-release-sp-task {
    max-width: 130px;
    padding: 0.34em 0.64em;
    font-size: 9.2px;
    letter-spacing: 0;
  }

  .poscom-release-sp .poscom-release-sp-copy {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(29px, 8.45vw, 32px);
    letter-spacing: -0.07em;
  }
}

@media (max-width: 360px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] {
    top: calc(var(--release-sp-scene-top) + 22px) !important;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    width: clamp(138px, 39vw, 146px);
    max-width: 146px;
    min-height: 102px;
    aspect-ratio: 1.35 / 1;
    padding: 8px 9px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__inner,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__inner {
    gap: 5px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__icon {
    width: clamp(36px, 11vw, 42px);
    height: clamp(36px, 11vw, 42px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--stock .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: clamp(52px, 16vw, 58px);
    height: clamp(30px, 9vw, 34px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__title,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__title {
    font-size: clamp(13px, 3.8vw, 14.5px);
    line-height: 1.15;
    letter-spacing: 0.02em;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp__cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp__cards {
    height: min(42svh, 272px);
    transform: translate3d(0, 10px, 0);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(1),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(1) {
    top: calc(50% + 32px);
    left: calc(50% - 8px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(2),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(2) {
    top: calc(50% + 28px);
    left: calc(50% + 8px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(3),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(3) {
    left: calc(50% - 12px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(4),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(4) {
    top: calc(50% - 16px);
    left: calc(50% + 12px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(5),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(5) {
    top: calc(50% - 36px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] {
    top: calc(var(--release-sp-scene-top) + 30px);
  }

  .poscom-release-sp-task-pile {
    width: calc(100vw - 18px);
    height: min(47svh, 296px);
  }

  .poscom-release-sp-task {
    max-width: 124px;
    font-size: 9px;
  }
}

@media (max-width: 340px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] {
    top: calc(var(--release-sp-scene-top) + 20px) !important;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    width: clamp(132px, 40vw, 138px);
    max-width: 138px;
    min-height: 100px;
    aspect-ratio: 1.32 / 1;
    padding: 7px 8px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] {
    top: calc(var(--release-sp-scene-top) + 28px);
  }

  .poscom-release-sp-task-pile {
    width: calc(100vw - 18px);
    height: min(46svh, 282px);
  }

  .poscom-release-sp-task {
    max-width: 120px;
    padding: 0.32em 0.6em;
    font-size: 8.8px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__icon {
    width: 36px;
    height: 36px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--stock .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: 52px;
    height: 30px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__title,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__title {
    font-size: 13px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp__cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp__cards {
    height: min(42svh, 258px);
    transform: translate3d(0, 9px, 0);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(1),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(1) {
    top: calc(50% + 30px);
    left: calc(50% - 8px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(2),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(2) {
    top: calc(50% + 26px);
    left: calc(50% + 8px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(3),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(3) {
    left: calc(50% - 10px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(4),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(4) {
    top: calc(50% - 14px);
    left: calc(50% + 10px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(5),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(5) {
    top: calc(50% - 34px);
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(27px, 8.35vw, 29px);
    letter-spacing: -0.075em;
  }
}

@media (max-width: 320px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards {
    top: calc(var(--release-sp-scene-top) + 18px) !important;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card {
    width: 130px;
    max-width: 130px;
    min-height: 96px;
    aspect-ratio: 1.3 / 1;
    padding: 7px 8px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__inner,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__inner {
    gap: 4px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__icon {
    width: 34px;
    height: 34px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card--stock .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: 48px;
    height: 28px;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card__title,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card__title {
    font-size: 12.5px;
    line-height: 1.14;
    letter-spacing: 0.015em;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp__cards,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp__cards {
    height: min(41svh, 244px);
    transform: translate3d(0, 8px, 0);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(1),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(1) {
    top: calc(50% + 28px);
    left: calc(50% - 7px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(2),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(2) {
    top: calc(50% + 24px);
    left: calc(50% + 7px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(3),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(3) {
    left: calc(50% - 9px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(4),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(4) {
    top: calc(50% - 12px);
    left: calc(50% + 9px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--cards .poscom-release-sp-card:nth-child(5),
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="cards"] .poscom-release-sp-card:nth-child(5) {
    top: calc(50% - 30px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] {
    top: calc(var(--release-sp-scene-top) + 24px);
  }

  .poscom-release-sp-task-pile {
    width: calc(100vw - 18px);
    height: min(44svh, 260px);
  }

  .poscom-release-sp-task {
    max-width: 112px;
    padding: 0.3em 0.56em;
    font-size: 8.4px;
  }

  .poscom-release-sp .poscom-release-sp-copy {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(25px, 8.55vw, 27.5px);
    letter-spacing: -0.08em;
  }
}

/* ======================================
  TOP Release SP Before Scene Top Clip Fix
  画面高が短い端末でもBefore表示の上端を切らない
====================================== */

@media (max-width: 959px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before {
    align-items: start;
    justify-items: center;
    overflow: visible;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-before {
    min-height: 0;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-task-pile {
    overflow: visible;
  }
}

@media (max-width: 430px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp-task-pile {
    height: min(47svh, 320px);
  }
}

@media (max-width: 374px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp-task-pile {
    height: min(44.5svh, 292px);
  }
}

@media (max-width: 360px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp-task-pile {
    height: min(43.5svh, 278px);
  }
}

@media (max-width: 340px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp-task-pile {
    height: min(44svh, 272px);
  }
}

@media (max-width: 320px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp-task-pile {
    height: min(42svh, 246px);
  }
}

/* ======================================
  TOP Release SP Final Copy Lift
  2行コピー＋背面SPEED UPを一体で少し上げる
====================================== */

@media (max-width: 959px) {
  /*
    シーンのtop/bottomを動かしても狙った位置に上がらないため、
    copy本体を上げる。
    背面のSPEED UPは .poscom-release-sp-copy::before なので、
    親を上げればテキストと背景英字が一体で上がる。
  */
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="copy"] {
    top: var(--release-sp-scene-top) !important;
    bottom: var(--release-sp-safe-bottom) !important;
  }

  .poscom-release-sp .poscom-release-sp-copy {
    transform: translate3d(0, clamp(-48px, -5.8svh, -34px), 0) !important;
  }

  .poscom-release-sp .poscom-release-sp-copy::before {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* 430px前後 / Pro Max系 */
@media (min-width: 400px) and (max-width: 459px) {
  .poscom-release-sp .poscom-release-sp-copy {
    transform: translate3d(0, -42px, 0) !important;
  }
}

/* iPhone SE / 320〜374px安全弁 */
@media (max-width: 374px) {
  .poscom-release-sp .poscom-release-sp-copy {
    transform: translate3d(0, -30px, 0) !important;
  }
}

/* さらに狭い320px付近 */
@media (max-width: 340px) {
  .poscom-release-sp .poscom-release-sp-copy {
    transform: translate3d(0, -24px, 0) !important;
  }
}

@media (min-width: 390px) and (max-width: 599px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--logo,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="logo"] {
    top: calc(var(--release-sp-scene-top) - 24px) !important;
    bottom: calc(var(--release-sp-safe-bottom) + 12px) !important;
  }

  .poscom-release-sp-bridge__eyebrow {
    font-size: clamp(15px, 4vw, 20px) !important;
    letter-spacing: 0.16em !important;
  }

  .poscom-release-sp-bridge__text {
    width: min(76vw, 330px) !important;
    min-height: clamp(84px, 11.8svh, 108px) !important;
    padding: 14px 20px !important;
    font-size: clamp(21px, 5.7vw, 27px) !important;
    line-height: 1.2 !important;
  }
}

@media (min-width: 361px) and (max-width: 390px) and (max-height: 700px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--logo,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="logo"] {
    top: calc(var(--release-sp-scene-top) + 24px) !important;
    bottom: calc(var(--release-sp-safe-bottom) - 4px) !important;
  }
}

@media (max-width: 360px) and (max-height: 700px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--logo,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="logo"] {
    top: calc(var(--release-sp-scene-top) + 18px) !important;
    bottom: calc(var(--release-sp-safe-bottom) - 2px) !important;
  }
}

@media (max-width: 340px) and (max-height: 620px) {
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--logo,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="logo"] {
    top: calc(var(--release-sp-scene-top) + 14px) !important;
    bottom: var(--release-sp-safe-bottom) !important;
  }
}

/* ======================================
  TOP Release Tablet Only
  Free Your Core Business タブレット専用拡大
  PC・スマホには効かせない
====================================== */

@media (min-width: 600px) and (max-width: 959px) and (min-height: 700px) {
  .poscom-release-sp {
    --release-sp-head-top: clamp(58px, 6.2svh, 84px);
    --release-sp-scene-top: clamp(150px, 18svh, 210px);
    --release-sp-safe-bottom: clamp(92px, 11svh, 132px);
  }

  .poscom-release-sp__stage {
    min-height: 100svh;
    padding-bottom: var(--release-sp-safe-bottom);
  }

  .poscom-release-sp__title {
    width: min(100%, 860px);
  }

  .poscom-release-sp .poscom-ttl-gradient__main {
    font-size: clamp(36px, 5.4vw, 58px);
    letter-spacing: 0.14em;
  }

  .poscom-release-sp .poscom-ttl-gradient__sub {
    font-size: clamp(16px, 2.2vw, 22px);
    letter-spacing: 0.16em;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene {
    padding-inline: clamp(34px, 6vw, 64px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__cards {
    width: min(78vw, 640px);
    max-width: none;
    height: min(54svh, 560px);
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp-card,
  .poscom-release-sp .poscom-release-sp-card {
    width: clamp(250px, 36vw, 330px);
    max-width: none;
    min-height: clamp(128px, 15svh, 164px);
    padding: clamp(16px, 2vw, 24px) clamp(20px, 2.8vw, 30px);
  }

  .poscom-release-sp .poscom-release-sp-card__icon {
    width: clamp(60px, 8vw, 86px);
    height: clamp(60px, 8vw, 86px);
  }

  .poscom-release-sp .poscom-release-sp-card--data .poscom-release-sp-card__icon,
  .poscom-release-sp .poscom-release-sp-card--stock .poscom-release-sp-card__icon {
    width: clamp(92px, 13vw, 132px);
    height: clamp(50px, 7vw, 74px);
  }

  .poscom-release-sp .poscom-release-sp-card__title {
    font-size: clamp(20px, 2.7vw, 27px);
    letter-spacing: 0.06em;
  }

  .poscom-release-sp-logo {
    width: min(58vw, 560px);
    max-width: none;
    padding: clamp(16px, 2.2vw, 26px);
  }

  .poscom-release-sp-visual {
    width: min(56vw, 520px);
    max-width: none;
  }

  .poscom-release-sp-before {
    width: min(76vw, 700px);
    max-width: none;
  }

  .poscom-release-sp-before__label,
  .poscom-release-sp-after__label,
  .poscom-release-sp-bridge__eyebrow {
    font-size: clamp(16px, 2vw, 22px);
  }

  .poscom-release-sp-before__title,
  .poscom-release-sp-after__title {
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.35;
  }

  .poscom-release-sp-task-pile {
    width: min(78vw, 720px);
    max-width: none;
    height: min(42svh, 430px);
  }

  .poscom-release-sp-task {
    max-width: none;
    padding: 0.42em 0.86em;
    font-size: clamp(11px, 1.55vw, 15px);
    line-height: 1.12;
    letter-spacing: 0.02em;
  }

  .poscom-release-sp-bridge__text {
    width: min(58vw, 520px);
    min-height: clamp(98px, 12svh, 132px);
    font-size: clamp(24px, 3vw, 34px);
  }

  .poscom-release-sp-bridge__line {
    height: min(20svh, 180px);
  }

  .poscom-release-sp-after {
    width: min(64vw, 560px);
    max-width: none;
  }

  .poscom-release-sp-after__grid {
    width: min(100%, 520px);
    gap: clamp(12px, 1.5vw, 18px);
  }

  .poscom-release-sp-after__item {
    min-height: clamp(58px, 7svh, 76px);
    font-size: clamp(17px, 2.2vw, 23px);
  }

  .poscom-release-sp .poscom-release-sp-copy {
    width: min(76vw, 700px);
    max-width: none;
  }

  .poscom-release-sp .poscom-release-sp-copy__text {
    gap: clamp(28px, 3.4svh, 42px);
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(42px, 5.6vw, 66px);
    letter-spacing: -0.045em;
  }

  .poscom-release-sp .poscom-release-sp-copy::before {
    font-size: clamp(96px, 14vw, 170px);
  }
}

/* ======================================
  TOP Release Tablet Portrait Boost Final
  iPad mini / iPad Air 縦だけ少し迫力を出す
  PC・スマホ・横向きタブレットには効かせない
====================================== */

@media (min-width: 700px) and (max-width: 959px) and (min-height: 900px) {
  .poscom-release-sp {
    --release-sp-head-top: clamp(54px, 5.6svh, 74px);
    --release-sp-scene-top: clamp(142px, 16.8svh, 180px);
    --release-sp-safe-bottom: clamp(104px, 11.5svh, 134px);
  }

  .poscom-release-sp__stage {
    min-height: 100svh;
    padding-bottom: var(--release-sp-safe-bottom);
  }

  .poscom-release-sp .poscom-ttl-gradient__main {
    font-size: clamp(40px, 5.9vw, 62px);
    letter-spacing: 0.145em;
  }

  .poscom-release-sp .poscom-ttl-gradient__sub {
    font-size: clamp(17px, 2.35vw, 23px);
    letter-spacing: 0.16em;
  }

  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene {
    padding-inline: clamp(28px, 5vw, 48px);
  }

  .poscom-release-sp-logo {
    width: min(80vw, 620px) !important;
    max-width: calc(100vw - 56px) !important;
    padding: clamp(16px, 2.1vw, 24px) !important;
  }

  .poscom-release-sp-visual {
    width: min(78vw, 610px) !important;
    max-width: calc(100vw - 56px) !important;
  }

  .poscom-release-sp-visual img {
    width: auto !important;
    max-width: 100% !important;
    max-height: min(62svh, 620px) !important;
    margin-inline: auto !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-before,
  .poscom-release-sp-before {
    width: min(88vw, 740px) !important;
    max-width: calc(100vw - 48px) !important;
    min-height: min(52svh, 500px) !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-before__label,
  .poscom-release-sp-before__label {
    display: block !important;
    margin-bottom: clamp(14px, 1.7svh, 20px) !important;
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: 0.09em !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-before__title,
  .poscom-release-sp-before__title {
    margin-bottom: clamp(10px, 1.2svh, 14px) !important;
    font-size: clamp(40px, 5.35vw, 52px) !important;
    line-height: 1.22 !important;
    letter-spacing: 0.015em !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-task-pile,
  .poscom-release-sp-task-pile {
    width: min(91vw, 760px) !important;
    max-width: calc(100vw - 44px) !important;
    height: min(45svh, 460px) !important;
    margin-top: clamp(-10px, -1.2svh, -4px) !important;
    overflow: visible !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-task,
  .poscom-release-sp-task {
    max-width: 236px !important;
    min-height: 2.08em !important;
    padding: 0.44em 0.9em !important;
    font-size: clamp(13px, 1.72vw, 15px) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.016em !important;
  }

  .poscom-release-sp-bridge {
    width: min(82vw, 620px) !important;
    max-width: calc(100vw - 56px) !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="bridge"] .poscom-release-sp-bridge__eyebrow,
  .poscom-release-sp-bridge__eyebrow {
    display: block !important;
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: 0.09em !important;
  }

  .poscom-release-sp-bridge__text {
    width: min(74vw, 520px) !important;
    min-height: clamp(112px, 12.5svh, 146px) !important;
    padding: clamp(22px, 2.8vw, 30px) clamp(34px, 4vw, 46px) !important;
    font-size: clamp(30px, 3.9vw, 40px) !important;
    line-height: 1.35 !important;
  }

  .poscom-release-sp-bridge__line {
    height: clamp(132px, 18svh, 184px) !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] .poscom-release-sp-after,
  .poscom-release-sp-after {
    width: min(76vw, 620px) !important;
    max-width: calc(100vw - 56px) !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] .poscom-release-sp-after__label,
  .poscom-release-sp-after__label {
    display: block !important;
    font-size: 34px !important;
    line-height: 1.12 !important;
    letter-spacing: 0.09em !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] .poscom-release-sp-after__title,
  .poscom-release-sp-after__title {
    font-size: clamp(32px, 4.1vw, 40px) !important;
    line-height: 1.28 !important;
  }

  .poscom-release-sp-after__grid {
    width: min(100%, 540px) !important;
    gap: clamp(12px, 1.55svh, 16px) !important;
  }

  .poscom-release-sp-after__item {
    min-height: clamp(60px, 6.8svh, 76px) !important;
    padding: 13px 24px !important;
    font-size: clamp(19px, 2.4vw, 23px) !important;
    line-height: 1.2 !important;
  }

  .poscom-release-sp .poscom-release-sp-copy {
    width: min(86vw, 740px) !important;
    max-width: calc(100vw - 56px) !important;
  }

  .poscom-release-sp .poscom-release-sp-copy::before {
    font-size: clamp(118px, 16.5vw, 176px) !important;
  }

  .poscom-release-sp .poscom-release-sp-copy__text {
    gap: clamp(30px, 3.6svh, 44px) !important;
  }

  .poscom-release-sp .poscom-release-sp-copy__text span:first-child,
  .poscom-release-sp .poscom-release-sp-copy__text span:last-child {
    font-size: clamp(50px, 6.8vw, 68px) !important;
    letter-spacing: -0.05em !important;
  }

  /* ======================================
    Tablet Portrait Scene Center Final
    iPad mini / iPad Air 縦：
    Before / Bridge / After を端末差なく画面中央へ
  ====================================== */

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="bridge"],
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"],
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--bridge,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--after {
    top: 0 !important;
    right: 0 !important;
    bottom: var(--release-sp-safe-bottom) !important;
    left: 0 !important;
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding-inline: clamp(28px, 5vw, 48px) !important;

    /*
      下固定メニュー分だけ bottom を空けているため、
      同じ量を padding-top に入れる。
      これで「表示可能領域の中央」ではなく、
      見た目として画面中央に近い基準になる。
    */
    padding-top: var(--release-sp-safe-bottom) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /*
    以前の after 内側持ち上げ指定が残っていても無効化する。
    中身の位置は、親シーンの中央寄せに任せる。
  */
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] .poscom-release-sp-after,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--after .poscom-release-sp-after {
    position: static !important;
    top: auto !important;
  }

  /*
    before / bridge / after の中身自体は中央に置く。
    文字サイズ・余白・ピル配置・ボタン間隔は触らない。
  */
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="bridge"] .poscom-release-sp-bridge,
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="after"] .poscom-release-sp-after {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ======================================
    Tablet Portrait Before Visual Center Final
    5枚カードではなく、Beforeシーン全体を見た目中央へ
  ====================================== */

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"],
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before {
    top: 0 !important;
    right: 0 !important;
    bottom: var(--release-sp-safe-bottom) !important;
    left: 0 !important;

    display: grid !important;
    align-items: center !important;
    justify-items: center !important;

    width: 100% !important;
    margin: 0 !important;
    padding-inline: clamp(28px, 5vw, 48px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Tablet Portrait Before Auto Center Target */
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-before,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-before {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: translate3d(0, var(--poscom-release-before-y-js, 0px), 0) !important;
    will-change: transform;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-task-pile,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-task-pile {
    margin-bottom: 0 !important;
  }

}


/* ======================================
  TOP Release Normal Tablet Before Balance Tune
  通常タブレット：Before全体を上げすぎない安全版
  ※JS・ピル座標・スマホ・PC・iPad縦強化は触らない
====================================== */

/*
  対象：
  600〜959px / 高さ700〜899px の通常タブレットだけ。

  目的：
  BeforeシーンがFree Your Core Business見出し側へ寄りすぎないよう、
  top:0 の全面中央寄せをやめ、見出し領域を避ける。
  中身を強制的に上へ逃がす transform と、ピルの -12px 上げも解除する。
*/
@media (min-width: 600px) and (max-width: 959px) and (min-height: 700px) and (max-height: 899px) {
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"],
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before {
    top: var(--release-sp-head-top) !important;
    right: 0 !important;
    bottom: var(--release-sp-safe-bottom) !important;
    left: 0 !important;
    display: grid !important;
    align-items: center !important;
    justify-items: center !important;
    padding-inline: clamp(18px, 4vw, 40px) !important;
    padding-top: clamp(48px, 6svh, 76px) !important;
    padding-bottom: clamp(24px, 4svh, 42px) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-before,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-before {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    will-change: auto;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-before__title,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-before__title {
    margin-bottom: 8px !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-task-pile,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-task-pile {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}


/* ======================================
  TOP Release Small Phone Before Gap Tune
  320〜360px：Before見出し下〜ピル上部の余白だけ少し詰める
  ※中央寄せ・JS・ピル座標・ピルサイズは触らない
====================================== */

/*
  360px以下：
  小さいスマホで「本業の時間を圧迫。」とピル群の余白が広く見えるため、
  ピル群だけを少し上へ寄せる。
*/
@media (max-width: 360px) {
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-before__title,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-before__title {
    margin-bottom: 3px !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-task-pile,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-task-pile {
    margin-top: -6px !important;
  }
}

/*
  340px以下：
  さらに狭い端末では、詰めすぎによる見出しかぶりを避けるため少し控えめ。
*/
@media (max-width: 340px) {
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-task-pile,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-task-pile {
    margin-top: -5px !important;
  }
}

/*
  320px付近：
  最小幅の安全側。下固定メニューやPAGE TOPとの距離を優先しつつ、
  余白を少しだけ詰める。
*/
@media (max-width: 320px) {
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-task-pile,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-task-pile {
    margin-top: -4px !important;
  }
}


/* ======================================
  TOP Release Medium Phone Before Gap Tune
  390〜430px：Before見出し下〜ピル上部の余白を軽く詰める
  ※中央寄せ・JS・ピル座標・ピルサイズは触らない
====================================== */

/*
  390〜430px台：
  普通〜大きめスマホで「本業の時間を圧迫。」とピル群の余白を軽く詰める。
  iPhone 16 Pro Max近似 440×792 は対象外。
  320〜360px用の既存調整にも影響させない。
*/
@media (min-width: 390px) and (max-width: 430px) {
  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-before__title,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-before__title {
    margin-bottom: 3px !important;
  }

  .poscom-release-sp.is-gsap-ready [data-release-sp-scene="before"] .poscom-release-sp-task-pile,
  .poscom-release-sp.is-gsap-ready .poscom-release-sp__scene--before .poscom-release-sp-task-pile {
    margin-top: -8px !important;
  }
}



@media (min-width: 960px) {
  .p-mainVisual .pc_only {
    display: block !important;
  }

  .p-mainVisual .poscom-hero-sp-only {
    display: none !important;
  }

  .poscom-hero-sp-contact-overlap {
    display: none !important;
  }
}

@media (max-width: 959px) {
  .p-mainVisual .pc_only {
    display: none !important;
  }

  .p-mainVisual .poscom-hero-sp-only {
    display: block !important;
  }
}

/* ======================================
  TOP Hero SP Layout Variables
  Fixed SP/TAB copy start and contact overlap
====================================== */

@media (max-width: 599px) {
  body {
    --poscom-hero-sp-safe-x: clamp(18px, 5.2vw, 24px);
    --poscom-hero-sp-copy-lift: clamp(94px, 24vw, 106px);
    --poscom-hero-sp-contact-overlap: clamp(68px, 17vw, 84px);
    --poscom-hero-sp-contact-pull: calc((var(--poscom-hero-sp-copy-lift) + var(--poscom-hero-sp-contact-overlap)) * -1);
    --poscom-hero-sp-copy-top-gap: 0px;
    --poscom-hero-sp-bottom-pad: 8px;
    --poscom-hero-sp-copy-line-gap: 6px;
    --poscom-hero-sp-copy-line-height: 1.08;
    --poscom-hero-sp-copy-card-gap: 20px;
    --poscom-hero-sp-stack-gap: 20px;
    --poscom-hero-sp-after-gap: 14px;
  }
}

@media (max-width: 360px) {
  body {
    --poscom-hero-sp-safe-x: 18px;
    --poscom-hero-sp-copy-lift: 62px;
    --poscom-hero-sp-contact-overlap: 34px;
    --poscom-hero-sp-contact-pull: calc((var(--poscom-hero-sp-copy-lift) + var(--poscom-hero-sp-contact-overlap)) * -1);
    --poscom-hero-sp-copy-top-gap: 0px;
    --poscom-hero-sp-bottom-pad: 6px;
    --poscom-hero-sp-copy-line-gap: 4px;
    --poscom-hero-sp-copy-line-height: 1.06;
    --poscom-hero-sp-copy-card-gap: 14px;
    --poscom-hero-sp-stack-gap: 14px;
    --poscom-hero-sp-after-gap: 18px;
  }
}

@media (max-width: 430px) and (max-height: 700px) {
  body {
    --poscom-hero-sp-copy-lift: 66px;
    --poscom-hero-sp-contact-overlap: 40px;
    --poscom-hero-sp-contact-pull: calc((var(--poscom-hero-sp-copy-lift) + var(--poscom-hero-sp-contact-overlap)) * -1);
    --poscom-hero-sp-copy-line-gap: 4px;
    --poscom-hero-sp-copy-line-height: 1.06;
    --poscom-hero-sp-copy-card-gap: 14px;
    --poscom-hero-sp-stack-gap: 14px;
    --poscom-hero-sp-after-gap: 18px;
  }
}

@media (min-width: 361px) and (max-width: 390px) and (max-height: 700px) {
  body {
    /* SE2/SE3: lower the copy and proof card by weakening lift 6px. */
    --poscom-hero-sp-copy-lift: 60px;
    /*
      Keep the contact-pull total at 106px:
      old 66 + 40, new 60 + 46.
    */
    --poscom-hero-sp-contact-overlap: 46px;
    --poscom-hero-sp-contact-pull: calc((var(--poscom-hero-sp-copy-lift) + var(--poscom-hero-sp-contact-overlap)) * -1);
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  body {
    --poscom-hero-sp-safe-x: 56px;
    --poscom-hero-sp-copy-lift: clamp(118px, 13.5vw, 138px);
    --poscom-hero-sp-contact-overlap: clamp(132px, 16vw, 164px);
    --poscom-hero-sp-contact-pull: calc((var(--poscom-hero-sp-copy-lift) + var(--poscom-hero-sp-contact-overlap)) * -1);
    --poscom-hero-sp-copy-top-gap: 0px;
    --poscom-hero-sp-bottom-pad: 10px;
    --poscom-hero-sp-copy-line-gap: 8px;
    --poscom-hero-sp-copy-line-height: 1.09;
    --poscom-hero-sp-copy-card-gap: clamp(22px, 3vw, 30px);
    --poscom-hero-sp-stack-gap: clamp(22px, 3vw, 30px);
    --poscom-hero-sp-after-gap: clamp(28px, 4vw, 48px);
  }
}

/* ======================================
  TOP Hero SP Dedicated Layout
  Main visual contents: copy and proof card only
====================================== */

@media (max-width: 959px) {
  .p-mainVisual,
  .p-mainVisual .sp_only,
  .p-mainVisual .poscom-hero-sp-only,
  .p-mainVisual .poscom-hero-sp,
  .p-mainVisual .poscom-hero-sp__final,
  .p-mainVisual .poscom-hero-sp__final-stack,
  .p-mainVisual .poscom-hero-sp__proof-card,
  .poscom-hero-sp-contact-overlap,
  .poscom-hero-sp-contact-overlap .poscom-hero-sp__contact-card,
  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav--sp {
    box-sizing: border-box;
    min-width: 0;
  }

  .p-mainVisual {
    overflow: visible;
  }

  .p-mainVisual .sp_only,
  .p-mainVisual .poscom-hero-sp-only {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-right: 0;
    margin-left: -50vw;
    padding-right: 0;
    padding-left: 0;
    overflow: visible;
  }

  .p-mainVisual .poscom-hero-sp {
    position: relative;
    z-index: 2;
    display: block;
    width: min(100%, calc(100vw - var(--poscom-hero-sp-safe-x)));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
    margin-inline: auto;
    padding-top: var(--poscom-hero-sp-copy-top-gap);
    padding-bottom: var(--poscom-hero-sp-bottom-pad);
    overflow: visible;
  }

  .p-mainVisual .poscom-hero-sp__stage {
    display: none !important;
  }

  .p-mainVisual .poscom-hero-sp__final {
    display: block !important;
    width: min(100%, calc(100vw - var(--poscom-hero-sp-safe-x)));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
    margin-inline: auto;
    overflow: visible;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(calc(var(--poscom-hero-sp-copy-lift) * -1)) !important;
  }

  .p-mainVisual .poscom-hero-sp__final-stack {
    display: grid;
    gap: var(--poscom-hero-sp-copy-card-gap, var(--poscom-hero-sp-stack-gap));
    width: min(100%, calc(100vw - var(--poscom-hero-sp-safe-x)));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
    margin-inline: auto;
    overflow: visible;
  }

  .p-mainVisual .poscom-hero-sp__main-copy {
    display: grid;
    justify-items: center;
    row-gap: var(--poscom-hero-sp-copy-line-gap, 0px);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    color: #ffffff;
    font-size: clamp(26px, 8.1vw, 38px);
    font-weight: 900;
    line-height: var(--poscom-hero-sp-copy-line-height, 1.04);
    letter-spacing: 0.01em;
    text-align: center;
    text-shadow:
      0 2px 0 rgba(6, 27, 58, 0.34),
      0 8px 20px rgba(0, 0, 0, 0.32);
  }

  .p-mainVisual .poscom-hero-sp__main-copy-line {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
  }

  .p-mainVisual .poscom-hero-sp__main-copy-line--nowrap {
    font-size: 0.94em;
    letter-spacing: -0.01em;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-pending .poscom-hero-sp__main-copy-line {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__main-copy-line {
    will-change: clip-path;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__main-copy-line:first-child {
    animation: poscomHeroSpTypeReveal 0.95s steps(9, end) 0.18s both;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__main-copy-line:last-child {
    animation: poscomHeroSpTypeReveal 1.25s steps(12, end) 1.28s both;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__main-copy-line::after {
    content: "";
    position: absolute;
    top: 0.08em;
    bottom: 0.08em;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: #6ff5ee;
    box-shadow:
      0 0 8px rgba(111, 245, 238, 0.76),
      0 0 16px rgba(53, 207, 218, 0.36);
    opacity: 1;
    transform: translateX(-100%);
    pointer-events: none;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__main-copy-line:first-child::after {
    animation:
      poscomHeroSpCaretMove 0.95s steps(9, end) 0.18s both,
      poscomHeroSpCaretHide 0s linear 1.13s forwards;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__main-copy-line:last-child::after {
    animation:
      poscomHeroSpCaretMove 1.25s steps(12, end) 1.28s both,
      poscomHeroSpCaretBlink 0.66s step-end 2.53s 3,
      poscomHeroSpCaretHide 0s linear 4.51s forwards;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-complete .poscom-hero-sp__main-copy-line {
    -webkit-clip-path: none;
    clip-path: none;
  }

  .p-mainVisual .poscom-hero-sp__proof-card {
    width: min(100%, calc(100vw - var(--poscom-hero-sp-safe-x)));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
    margin: 0 auto;
    padding: 11px 12px 10px;
    overflow: hidden;
    border: 1px solid rgba(92, 228, 223, 0.34);
    border-radius: 12px;
    background:
      linear-gradient(
        135deg,
        rgba(4, 33, 46, 0.58) 0%,
        rgba(7, 77, 84, 0.40) 55%,
        rgba(7, 98, 104, 0.34) 100%
      );
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    box-shadow:
      0 12px 28px rgba(0, 10, 24, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  }

  .p-mainVisual .poscom-hero-sp__proof-head {
    display: grid;
    grid-template-columns: clamp(52px, 15vw, 58px) minmax(0, 1fr);
    align-items: stretch;
    column-gap: clamp(7px, 2.2vw, 9px);
    min-width: 0;
    max-width: 100%;
  }

  .p-mainVisual .poscom-hero-sp__badge {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: center;
    gap: 1px;
    min-width: 0;
    min-height: clamp(62px, 18vw, 67px);
    padding: 5px 3px;
    border: 1px solid rgba(64, 201, 212, 0.36);
    border-radius: 8px;
    background: rgba(3, 18, 38, 0.88);
    color: #ffffff;
    text-align: center;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 4px 12px rgba(0, 0, 0, 0.14);
  }

  .p-mainVisual .poscom-hero-sp__badge-label,
  .p-mainVisual .poscom-hero-sp__badge-unit {
    font-size: 8px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .p-mainVisual .poscom-hero-sp__badge-num {
    color: #65e7e7;
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
  }

  .p-mainVisual .poscom-hero-sp__badge-num small {
    margin-left: 1px;
    font-size: 9px;
  }

  .p-mainVisual .poscom-hero-sp__tags {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
    max-width: 100%;
  }

  .p-mainVisual .poscom-hero-sp__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    min-width: 0;
    min-height: 28px;
    padding: 3px 5px;
    overflow: hidden;
    border: 1px solid rgba(64, 201, 212, 0.36);
    border-radius: 6px;
    background: rgba(3, 18, 38, 0.88);
    white-space: nowrap;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 4px 12px rgba(0, 0, 0, 0.14);
  }

  .p-mainVisual .poscom-hero-sp__tag--wide {
    grid-column: 1 / -1;
  }

  .p-mainVisual .poscom-hero-sp__tag em {
    color: rgba(255, 255, 255, 0.84);
    font-size: 8.5px;
    font-style: normal;
    font-weight: 800;
  }

  .p-mainVisual .poscom-hero-sp__tag strong {
    color: #fff12c;
    font-size: clamp(10.5px, 3vw, 12px);
    font-weight: 900;
    line-height: 1.1;
  }

  .p-mainVisual .poscom-hero-motion__final-lead {
    display: grid;
    row-gap: 2px;
    max-width: 100%;
    margin: 6px 0 0;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(10.8px, 2.9vw, 12.4px);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.005em;
    overflow-wrap: anywhere;
    line-break: strict;
  }

  .p-mainVisual .poscom-hero-motion__final-lead span {
    display: block;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-pending .poscom-hero-sp__badge,
  .p-mainVisual .poscom-hero-sp.is-typing-pending .poscom-hero-sp__tag {
    opacity: 0;
    transform: translateY(8px) scale(0.72);
    filter: blur(4px);
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__badge {
    animation: poscomHeroSpProofPop 0.58s cubic-bezier(0.2, 0.9, 0.25, 1.25) 0.48s both;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__tag:nth-child(1) {
    animation: poscomHeroSpProofPop 0.58s cubic-bezier(0.2, 0.9, 0.25, 1.25) 0.92s both;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__tag:nth-child(2) {
    animation: poscomHeroSpProofPop 0.58s cubic-bezier(0.2, 0.9, 0.25, 1.25) 1.36s both;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-active .poscom-hero-sp__tag:nth-child(3) {
    animation: poscomHeroSpProofPop 0.62s cubic-bezier(0.2, 0.9, 0.25, 1.25) 1.8s both;
  }

  .p-mainVisual .poscom-hero-sp.is-typing-complete .poscom-hero-sp__badge,
  .p-mainVisual .poscom-hero-sp.is-typing-complete .poscom-hero-sp__tag {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes poscomHeroSpTypeReveal {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }

  to {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes poscomHeroSpCaretMove {
  from {
    left: 0;
  }

  to {
    left: 100%;
  }
}

@keyframes poscomHeroSpCaretBlink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes poscomHeroSpCaretHide {
  to {
    opacity: 0;
  }
}

@keyframes poscomHeroSpProofPop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.72);
    filter: blur(4px);
  }

  68% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 599px) {
  .p-mainVisual .poscom-hero-sp__proof-card {
    padding: 16px 12px 16px;
  }

  .p-mainVisual .poscom-hero-motion__final-lead {
    margin-top: 8px;
    padding-top: 8px;
    line-height: 1.46;
  }
}

@media (max-width: 360px), (max-width: 430px) and (max-height: 700px) {
  .p-mainVisual .poscom-hero-sp__main-copy {
    font-size: clamp(21px, 7.1vw, 25px);
    line-height: var(--poscom-hero-sp-copy-line-height, 1.02);
    letter-spacing: 0;
  }

  .p-mainVisual .poscom-hero-sp__main-copy-line--nowrap {
    font-size: 0.9em;
    letter-spacing: -0.02em;
  }

  .p-mainVisual .poscom-hero-sp__proof-card {
    padding: 9px 8px 9px;
  }

  .p-mainVisual .poscom-hero-sp__proof-head {
    grid-template-columns: 49px minmax(0, 1fr);
    column-gap: 6px;
  }

  .p-mainVisual .poscom-hero-sp__badge {
    min-height: 56px;
    padding: 4px 2px;
  }

  .p-mainVisual .poscom-hero-sp__badge-num {
    font-size: 19px;
  }

  .p-mainVisual .poscom-hero-sp__tag {
    min-height: 24px;
    padding-inline: 3px;
  }

  .p-mainVisual .poscom-hero-sp__tag em {
    font-size: 7px;
  }

  .p-mainVisual .poscom-hero-sp__tag strong {
    font-size: 9.5px;
  }

  .p-mainVisual .poscom-hero-motion__final-lead {
    margin-top: 5px;
    padding-top: 5px;
    font-size: 10px;
    line-height: 1.34;
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  .p-mainVisual .poscom-hero-sp,
  .p-mainVisual .poscom-hero-sp__final,
  .p-mainVisual .poscom-hero-sp__final-stack {
    width: min(720px, calc(100vw - var(--poscom-hero-sp-safe-x)));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
    margin-right: auto;
    margin-left: auto;
  }

  .p-mainVisual .poscom-hero-sp__proof-card {
    width: min(660px, calc(100vw - var(--poscom-hero-sp-safe-x)));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
    margin-right: auto;
    margin-left: auto;
  }

  .p-mainVisual .poscom-hero-sp__main-copy {
    font-size: clamp(34px, 5.2vw, 54px);
    line-height: var(--poscom-hero-sp-copy-line-height, 1.05);
  }

  .p-mainVisual .poscom-hero-sp__proof-card {
    padding: 24px 20px 26px;
  }

  .p-mainVisual .poscom-hero-motion__final-lead {
    font-size: clamp(13px, 1.7vw, 16px);
    line-height: 1.58;
  }
}

/* ======================================
  TOP Hero SP Contact Overlap
  Overhanging contact card from the external SP block
====================================== */

@media (max-width: 959px) {
  .wp-block-group.sp_only:has(.poscom-hero-sp-contact-overlap),
  .sp_only:has(.poscom-hero-sp-contact-overlap) {
    position: relative;
    left: 50%;
    z-index: 120;
    width: 100vw;
    max-width: 100vw;
    margin-top: var(--poscom-hero-sp-contact-pull) !important;
    margin-right: 0 !important;
    margin-bottom: var(--poscom-hero-sp-after-gap) !important;
    margin-left: -50vw !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  .wp-block-group.sp_only:has(.poscom-hero-sp-contact-overlap) > .wp-block-group__inner-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  .poscom-hero-sp-contact-overlap {
    position: relative;
    z-index: 120;
    width: min(560px, calc(100vw - var(--poscom-hero-sp-safe-x)));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    isolation: isolate;
    overflow: visible;
    transform: none;
  }

  .poscom-hero-sp-contact-overlap::before {
    content: none;
    display: none;
  }

  .poscom-hero-sp-contact-overlap::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -4px;
    z-index: -1;
    height: 10px;
    border-radius: 999px;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse at center,
        rgba(0, 7, 22, 0.22) 0%,
        rgba(0, 18, 36, 0.10) 48%,
        transparent 78%
      );
    filter: blur(4px);
    opacity: 0.22;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-sp__contact-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav--sp {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 14px 20px !important;
    border: 1px solid rgba(120, 238, 238, 0.36);
    border-radius: 12px;
    background:
      linear-gradient(
        135deg,
        rgba(8, 39, 68, 0.94) 0%,
        rgba(6, 66, 86, 0.90) 54%,
        rgba(4, 86, 96, 0.86) 100%
      );
    box-shadow:
      0 14px 24px rgba(0, 7, 22, 0.22),
      0 6px 12px rgba(0, 55, 78, 0.10),
      0 0 0 1px rgba(83, 178, 187, 0.16) inset,
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 -10px 18px rgba(0, 8, 24, 0.10) inset;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav--sp::before,
  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav--sp::after {
    content: none !important;
    display: none !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__title {
    margin-bottom: 6px !important;
    font-size: clamp(20px, 5.5vw, 25px) !important;
    line-height: 1.15;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__lead {
    margin-bottom: 13px !important;
    font-size: clamp(11.5px, 3.1vw, 13.5px) !important;
    line-height: 1.5;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__step {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 9px;
    margin-top: 10px;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__step-label {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    font-size: 11.5px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__step-label span {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 26px;
    font-size: 9.5px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__select {
    min-height: 44px !important;
    padding: 0 34px 0 10px !important;
    font-size: 12px !important;
    box-sizing: border-box;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__button {
    min-height: 46px !important;
    margin-top: 14px !important;
    font-size: 12px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__button::after {
    right: 14px;
    font-size: 16px !important;
  }
}

@media (max-width: 360px) {
  .poscom-hero-sp-contact-overlap {
    width: calc(100vw - var(--poscom-hero-sp-safe-x));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav--sp {
    padding: 15px 11px 17px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__title {
    margin-bottom: 5px !important;
    font-size: 18.5px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__lead {
    margin-bottom: 11px !important;
    font-size: 11px !important;
    line-height: 1.44;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__step {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 6px;
    margin-top: 8px;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__step-label {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 5px;
    font-size: 10.2px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__step-label span {
    width: 28px;
    height: 23px;
    font-size: 8.8px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__select {
    min-height: 41px !important;
    padding-right: 31px !important;
    font-size: 10.8px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__button {
    min-height: 43px !important;
    margin-top: 11px !important;
    font-size: 10.8px !important;
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  .wp-block-group.sp_only:has(.poscom-hero-sp-contact-overlap),
  .sp_only:has(.poscom-hero-sp-contact-overlap) {
    margin-top: var(--poscom-hero-sp-contact-pull) !important;
    margin-bottom: var(--poscom-hero-sp-after-gap) !important;
  }

  .poscom-hero-sp-contact-overlap {
    width: min(680px, calc(100vw - var(--poscom-hero-sp-safe-x)));
    max-width: calc(100vw - var(--poscom-hero-sp-safe-x));
    margin-right: auto;
    margin-left: auto;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav--sp {
    padding: 18px 18px 20px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__title {
    margin-bottom: 6px !important;
    font-size: clamp(22px, 3.6vw, 28px) !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__lead {
    margin-bottom: 12px !important;
    font-size: clamp(12px, 1.8vw, 14px) !important;
    line-height: 1.5;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__step {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 11px;
    margin-top: 10px;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__select {
    min-height: 44px !important;
  }

  .poscom-hero-sp-contact-overlap .poscom-hero-contact-nav__button {
    min-height: 46px !important;
    margin-top: 14px !important;
  }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .p-mainVisual .poscom-hero-sp__main-copy-line {
    -webkit-clip-path: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  .p-mainVisual .poscom-hero-sp__main-copy-line::after {
    content: none !important;
  }

  .p-mainVisual .poscom-hero-sp__badge,
  .p-mainVisual .poscom-hero-sp__tag {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}




/* ======================================
  Front Page Width Medium 85
  TOPページ：
  指定したフルワイド3セクションだけ、
  小さい実効幅PCでSWELL幅広と幅広なしの中間幅にする
  ※背景フルワイド・大きいPC・スマホは触らない
====================================== */

@media (min-width: 960px) and (max-width: 1366px) {
  /*
    対象：
    - 最小ロット数・納期
    - サービスの流れ
    - プライバシーについて

    フルワイド背景は触らず、中身だけ85vwにする。
  */
  #body_wrap .swell-block-fullWide.poscom-front-width-medium > .swell-block-fullWide__inner {
    width: min(85vw, 1160px) !important;
    max-width: calc(100vw - 64px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium > .swell-block-fullWide__inner * {
    box-sizing: border-box;
  }

  /*
    対象フルワイド内のSWELL幅広/全幅リッチカラムだけ、
    85vwコンテナ内に収める。
  */
  #body_wrap .swell-block-fullWide.poscom-front-width-medium > .swell-block-fullWide__inner .swell-block-columns.alignwide,
  #body_wrap .swell-block-fullWide.poscom-front-width-medium > .swell-block-fullWide__inner .swell-block-columns.alignfull {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium > .swell-block-fullWide__inner .swell-block-columns__inner {
    max-width: 100% !important;
  }
}

/* さらに狭い実効幅PCだけ、もう少し安全側 */
@media (min-width: 960px) and (max-width: 1120px) {
  #body_wrap .swell-block-fullWide.poscom-front-width-medium > .swell-block-fullWide__inner {
    width: min(82vw, 1040px) !important;
    max-width: calc(100vw - 48px) !important;
  }
}

/* ======================================
  Front Page Flow PC Fit
  TOP：サービスの流れだけ、中のPCグループを小さい実効幅PCで85%に収める
  ※大きいPC・スマホは触らない
====================================== */

@media (min-width: 960px) and (max-width: 1366px) {
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit {
    width: 85vw !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit > .wp-block-group__inner-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    --swl-clmn-mrgn--x: 1rem !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only > .swell-block-columns__inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .poscom-flow-image {
    max-width: 100% !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .poscom-flow-image img {
    width: min(380px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* さらに狭い実効幅PCだけ */
@media (min-width: 960px) and (max-width: 1120px) {
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit {
    width: 82vw !important;
    max-width: 960px !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only {
    --swl-clmn-mrgn--x: 0.75rem !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .poscom-flow-image img {
    width: min(350px, 100%) !important;
  }
}


/* ======================================
  Front Page Flow PC Compact
  TOP：サービスの流れだけ、モバイルノート相当PCで中身をさらに圧縮
  ※大きいPC・スマホは触らない
====================================== */

@media (min-width: 960px) and (max-width: 1366px) {
  /* PC用工程グループ全体をさらに少し絞る */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit {
    width: 78vw !important;
    max-width: 980px !important;
  }

  /* 工程ごとの上下・左右の余白を詰める */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only {
    --swl-clmn-mrgn--x: 0.65rem !important;
    --swl-clmn-mrgn--y: 2.1rem !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only > .swell-block-columns__inner {
    column-gap: clamp(18px, 2vw, 28px) !important;
    row-gap: clamp(30px, 3.2vw, 44px) !important;
  }

  /* 左画像を少しだけ小さく */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .poscom-flow-image img {
    width: min(330px, 100%) !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 右側：番号 */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit h3.wp-block-heading em .swl-fz {
    font-size: clamp(46px, 4vw, 62px) !important;
    line-height: 1 !important;
  }

  /* 右側：タイトル */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit h3.wp-block-heading > .swl-fz {
    font-size: clamp(29px, 2.55vw, 40px) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.03em !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit h3.wp-block-heading {
    margin-bottom: 12px !important;
    line-height: 1.08 !important;
  }

  /* 右側：箇条書き全体 */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list {
    margin-top: 0 !important;
    font-size: clamp(15px, 1.12vw, 18px) !important;
    line-height: 1.45 !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list li {
    margin: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: clamp(15px, 1.12vw, 18px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.02em !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list li .swl-fz {
    font-size: 100% !important;
    line-height: inherit !important;
  }
}

/* さらに狭い実効幅PC：パビリオン150% / 14型225%寄り */
@media (min-width: 960px) and (max-width: 1120px) {
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit {
    width: 74vw !important;
    max-width: 880px !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only {
    --swl-clmn-mrgn--x: 0.5rem !important;
    --swl-clmn-mrgn--y: 1.75rem !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .poscom-flow-image img {
    width: min(300px, 100%) !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit h3.wp-block-heading em .swl-fz {
    font-size: clamp(40px, 3.9vw, 54px) !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit h3.wp-block-heading > .swl-fz {
    font-size: clamp(25px, 2.45vw, 34px) !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list,
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list li {
    font-size: 14.5px !important;
    line-height: 1.42 !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list li {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}


/* ======================================
  Front Page Flow PC Compact Grid Fix
  TOP：サービスの流れだけ、画像・余白・テキストを3列固定にして
  箇条書きカラムが下に落ちるのを防ぐ
  ※大きいPC・スマホは触らない
====================================== */

@media (min-width: 960px) and (max-width: 1366px) {
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only > .swell-block-columns__inner {
    display: grid !important;
    grid-template-columns: minmax(0, 40%) minmax(0, 4%) minmax(0, 56%) !important;
    column-gap: 0 !important;
    row-gap: clamp(34px, 3.2vw, 48px) !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only > .swell-block-columns__inner > .swell-block-column {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /*
    2列目・5列目・8列目…の空スペーサーカラムを
    グリッド上の細い余白として扱う
  */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only > .swell-block-columns__inner > .swell-block-column:nth-child(3n + 2) {
    min-height: 1px !important;
  }
}

/* さらに狭い実効幅PCだけ、画像を少しだけ抑えてテキスト幅を確保 */
@media (min-width: 960px) and (max-width: 1120px) {
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only > .swell-block-columns__inner {
    grid-template-columns: minmax(0, 38%) minmax(0, 3%) minmax(0, 59%) !important;
    row-gap: 34px !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .poscom-flow-image img {
    width: min(290px, 100%) !important;
  }
}


/* ======================================
  Front Page Flow PC Compact Visual Final
  TOP：サービスの流れ 仕上げ最終
  - 画像＋テキストの実グリッドを確実に右へ寄せる
  - 箇条書き下の点線を短くする
  ※大きいPC・スマホは触らない
====================================== */

@media (min-width: 960px) and (max-width: 1366px) {
  /*
    親ではなく、実際に画像＋テキストを並べている grid 本体を動かす。
    left ではなく transform なので効きやすい。
  */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only > .swell-block-columns__inner {
    transform: translateX(clamp(56px, 5.2vw, 96px)) !important;
  }

  /*
    箇条書きの点線を、右カラムいっぱいではなく
    テキスト量に合う幅で止める。
  */
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list {
    width: 19em !important;
    max-width: 19em !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list li {
    width: 100% !important;
    max-width: 100% !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list li::after {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
  }
}

/* さらに狭い実効幅PCでは、右寄せ量を少し控える */
@media (min-width: 960px) and (max-width: 1120px) {
  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit .swell-block-columns.pc_only > .swell-block-columns__inner {
    transform: translateX(clamp(34px, 4vw, 60px)) !important;
  }

  #body_wrap .poscom-flow-scroll .poscom-front-flow-pc-fit ul.wp-block-list {
    width: 25em !important;
    max-width: 25em !important;
  }
}


/* ======================================
  Front Page Privacy Mark Compact Tune
  TOP：85%中間幅表示時だけ
  - H2を少し小さくする
  - 3カードをアイコン上・文字下にする
  ※大きいPC・スマホは触らない
====================================== */

@media (min-width: 960px) and (max-width: 1366px) {
  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-ttl-gradient--privacy-mark {
    font-size: clamp(28px, 3.1vw, 42px) !important;
    line-height: 1.22 !important;
    letter-spacing: 0.035em !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-ttl-gradient--privacy-mark .poscom-ttl-gradient__main,
  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-ttl-gradient--privacy-mark .poscom-ttl-gradient__base,
  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-ttl-gradient--privacy-mark .poscom-ttl-gradient__shine {
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section__points {
    gap: clamp(16px, 1.8vw, 24px) !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section__point {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    padding: clamp(20px, 2.2vw, 28px) clamp(16px, 2vw, 24px) !important;
    text-align: center !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section__point-icon {
    margin: 0 auto !important;
    transform: none !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section__point-text {
    display: block !important;
    width: 100% !important;
    max-width: 7em !important;
    margin: 0 auto !important;
    font-size: clamp(15px, 1.25vw, 18px) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
  }
}

@media (min-width: 960px) and (max-width: 1120px) {
  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-ttl-gradient--privacy-mark {
    font-size: clamp(25px, 3vw, 36px) !important;
    line-height: 1.24 !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section__point {
    gap: 9px !important;
    padding: 20px 14px !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section__point-text {
    max-width: 6.8em !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
    letter-spacing: 0.02em !important;
  }
}

@media (max-width: 600px) {
  #body_wrap.home .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-privacy-mark-section__visual,
  #body_wrap.page-id-10 .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-privacy-mark-section__visual,
  #body_wrap .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-privacy-mark-section__visual {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  #body_wrap.home .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-privacy-mark-section__mark,
  #body_wrap.page-id-10 .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-privacy-mark-section__mark,
  #body_wrap .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section .poscom-privacy-mark-section__mark {
    margin-bottom: 12px !important;
  }

  #body_wrap.home .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__label,
  #body_wrap.page-id-10 .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__label,
  #body_wrap .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__label {
    margin: 0 0 4px !important;
    padding: 0 !important;
    line-height: 1.18 !important;
  }

  #body_wrap.home .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__meta,
  #body_wrap.page-id-10 .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__meta,
  #body_wrap .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__meta {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  #body_wrap.home .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__lead,
  #body_wrap.page-id-10 .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__lead,
  #body_wrap .post_content .swell-block-fullWide.poscom-front-width-medium .poscom-privacy-mark-section p.poscom-privacy-mark-section__lead {
    line-height: 1.54 !important;
  }
}


/* ======================================
  Front Page Lot Deadline Compact Gap
  TOP：85%中間幅表示時だけ
  最小ロット数・納期カード内の
  リード文下〜「DM発送代行」ラベル上の余白を少し詰める
  ※大きいPC・スマホは触らない
====================================== */

@media (min-width: 960px) and (max-width: 1366px) {
  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-front-lot-card__title {
    margin-bottom: clamp(18px, 1.8vw, 26px) !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-front-lot-card__items {
    margin-top: 0 !important;
    gap: clamp(18px, 1.8vw, 26px) !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-front-lot-card__label {
    margin-bottom: clamp(8px, 0.8vw, 12px) !important;
  }
}

/* さらに狭い実効幅PCだけ、もう少しだけ詰める */
@media (min-width: 960px) and (max-width: 1120px) {
  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-front-lot-card__title {
    margin-bottom: 16px !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-front-lot-card__items {
    gap: 18px !important;
  }

  #body_wrap .swell-block-fullWide.poscom-front-width-medium .poscom-front-lot-card__label {
    margin-bottom: 7px !important;
  }
}