@charset "UTF-8";
/* =========================================================
   Container LP ─ SNSキャンペーンLP（/lp/・pattern_poster 移植）
   一行と余白で印象づける、深緑×ブランドグリーンの引き算デザイン
   ========================================================= */
/* ペーパー地での小〜大文字アクセント（WCAG AA 確保: 対 #f4f7f4 ≒ 4.97:1） */
/* ---------- base ---------- */
.pattern_poster {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #141816;
  background: #0a1610;
  -webkit-font-smoothing: antialiased;
}
.pattern_poster *, .pattern_poster *::before, .pattern_poster *::after {
  box-sizing: border-box;
}
.pattern_poster img {
  max-width: 100%;
}
.pattern_poster .skip_link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #22c55e;
  color: #062b16;
  padding: 10px 18px;
  font-weight: 700;
  z-index: 100;
}
.pattern_poster .skip_link:focus {
  left: 8px;
  top: 8px;
}
.pattern_poster :focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: 3px;
}
.ps_visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* ---------- header ---------- */
.ps_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  transition: background 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.ps_header.is_scrolled {
  background: rgba(10, 22, 16, 0.86);
  backdrop-filter: blur(10px);
  border-bottom-color: #21332a;
}
.ps_header_inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ps_brand img {
  display: block;
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1);
}
.ps_header_cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(34, 197, 94, 0.6);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #f4f7f4;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}
.ps_header_cta:hover {
  background: #22c55e;
  color: #0a1610;
}
/* ---------- panel ---------- */
.ps_panel {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 12vw, 160px) 0;
  scroll-margin-top: 88px;
  /* 固定ヘッダー分のオフセット（アンカー移動時に見出しが隠れないように） */
}
.ps_panel_dark {
  background: #0a1610;
  color: #f4f7f4;
}
.ps_panel_paper {
  background: #fbfbf9;
  color: #141816;
}
.ps_wrap {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 2;
}
.ps_wrap_narrow {
  max-width: 860px;
}
/* ---------- shared type ---------- */
.ps_eyebrow {
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #22c55e;
  margin: 0 0 26px;
}
.ps_index {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #22c55e;
  margin: 0 0 22px;
}
.ps_index_no {
  color: #5c615c;
}
.ps_panel_dark .ps_index_no {
  color: #a2aca4;
}
.ps_big {
  font-weight: 900;
  font-size: clamp(34px, 6.4vw, 76px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  margin: 0;
}
.ps_accent {
  color: #22c55e;
}
/* ペーパー地ではアクセントを濃色に切替（WCAG AA コントラスト確保） */
.ps_panel_paper .ps_accent, .ps_panel_paper .ps_index {
  color: #0d7a39;
}
.ps_lead {
  max-width: 640px;
  margin: 28px 0 0;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.9;
  color: #5c615c;
}
.ps_panel_dark .ps_lead, .ps_lead_light {
  color: #a2aca4;
}
/* ---------- button ---------- */
.ps_btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.ps_btn_lg {
  padding: 17px 36px;
  font-size: 16px;
}
.ps_btn_primary {
  background: #22c55e;
  color: #062b16;
}
.ps_btn_primary:hover {
  background: #35d873;
  transform: translateY(-2px);
}
.ps_btn_ghost {
  border-color: rgba(244, 247, 244, 0.4);
  color: #f4f7f4;
}
.ps_btn_ghost:hover {
  background: rgba(244, 247, 244, 0.08);
  border-color: rgba(244, 247, 244, 0.7);
}
.ps_arrow {
  transition: transform 0.3s ease;
}
.ps_btn:hover .ps_arrow {
  transform: translateX(4px);
}
/* ---------- hero / cta deco ---------- */
.ps_hero_deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ps_ring {
  position: absolute;
  border: 1px solid #21332a;
  border-radius: 50%;
}
.ps_ring_1 {
  width: 440px;
  height: 440px;
  left: -150px;
  bottom: -180px;
}
.ps_ring_2 {
  width: 300px;
  height: 300px;
  left: -80px;
  bottom: -110px;
  border-color: #1b2921;
}
/* ---------- 01 hero ---------- */
.ps_hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px, 18vh, 200px) 0 140px;
}
.ps_hero_inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.ps_hero_title {
  font-weight: 900;
  font-size: clamp(46px, 9vw, 104px);
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 0;
}
.ps_ln {
  display: block;
}
.ps_hero_lead {
  margin: 32px 0 0;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #a2aca4;
}
.ps_hero_actions {
  margin: 44px 0 0;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
/* ---------- hero stage：散らかり→ひと箱に収束アニメ ---------- */
.ps_hero_stage {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 1;
}
.ps_pack {
  position: absolute;
  inset: 0;
}
.ps_pack_ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  border: 1px dashed #22332a;
  border-radius: 50%;
  animation: ps_pack_spin 40s linear infinite;
}
.ps_pack_box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18px;
  border: 1.5px solid #3b4f42;
  border-radius: 16px;
  background: rgba(16, 31, 22, 0.55);
  animation: ps_pack_breathe 6s ease-in-out infinite;
}
/* グリーンの梱包テープ */
.ps_pack_box::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 38px;
  height: 16px;
  background: rgba(34, 197, 94, 0.92);
}
.ps_pack_label {
  position: relative;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #f4f7f4;
}
.ps_frag {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 8px 15px;
  border: 1px solid #35473c;
  border-radius: 999px;
  background: #101f16;
  color: #c6d1c8;
  font-size: 13px;
  white-space: nowrap;
  animation: 6s cubic-bezier(0.5, 0, 0.2, 1) infinite backwards;
}
.ps_frag_1 {
  transform: translate(-50%, -50%) translate(-120px, -92px);
  animation-name: ps_pack_1;
  animation-delay: 0s;
}
.ps_frag_2 {
  transform: translate(-50%, -50%) translate(118px, -104px);
  animation-name: ps_pack_2;
  animation-delay: 0.5s;
}
.ps_frag_3 {
  transform: translate(-50%, -50%) translate(-150px, 44px);
  animation-name: ps_pack_3;
  animation-delay: 1s;
}
.ps_frag_4 {
  transform: translate(-50%, -50%) translate(140px, 72px);
  animation-name: ps_pack_4;
  animation-delay: 1.5s;
}
.ps_frag_5 {
  transform: translate(-50%, -50%) translate(-8px, 138px);
  animation-name: ps_pack_5;
  animation-delay: 2s;
}
@keyframes ps_pack_1 {
  0% {
    transform: translate(-50%, -50%) translate(-120px, -92px);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  56% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.66);
    opacity: 1;
  }
  70%, 100% {
    transform: translate(-50%, -50%) translate(0, 6px) scale(0.32);
    opacity: 0;
  }
}
@keyframes ps_pack_2 {
  0% {
    transform: translate(-50%, -50%) translate(118px, -104px);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  56% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.66);
    opacity: 1;
  }
  70%, 100% {
    transform: translate(-50%, -50%) translate(0, 6px) scale(0.32);
    opacity: 0;
  }
}
@keyframes ps_pack_3 {
  0% {
    transform: translate(-50%, -50%) translate(-150px, 44px);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  56% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.66);
    opacity: 1;
  }
  70%, 100% {
    transform: translate(-50%, -50%) translate(0, 6px) scale(0.32);
    opacity: 0;
  }
}
@keyframes ps_pack_4 {
  0% {
    transform: translate(-50%, -50%) translate(140px, 72px);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  56% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.66);
    opacity: 1;
  }
  70%, 100% {
    transform: translate(-50%, -50%) translate(0, 6px) scale(0.32);
    opacity: 0;
  }
}
@keyframes ps_pack_5 {
  0% {
    transform: translate(-50%, -50%) translate(-8px, 138px);
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  56% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.66);
    opacity: 1;
  }
  70%, 100% {
    transform: translate(-50%, -50%) translate(0, 6px) scale(0.32);
    opacity: 0;
  }
}
@keyframes ps_pack_breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  54% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}
@keyframes ps_pack_spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.ps_scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #a2aca4;
  z-index: 2;
}
.ps_scroll_text {
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
}
.ps_scroll_bar {
  width: 1px;
  height: 48px;
  background: linear-gradient(#a2aca4, transparent);
  animation: ps_scroll_pulse 2s ease-in-out infinite;
}
@keyframes ps_scroll_pulse {
  0%, 100% {
    transform: scaleY(0.4);
    transform-origin: top;
    opacity: 0.4;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}
/* ---------- 02 problem ---------- */
.ps_problem_list {
  margin: clamp(40px, 6vw, 72px) 0 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid #dfe5df;
}
.ps_problem_item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-bottom: 1px solid #dfe5df;
  font-size: clamp(20px, 3.2vw, 34px);
  font-weight: 700;
  line-height: 1.3;
}
.ps_problem_no {
  flex-shrink: 0;
  min-width: 34px;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0d7a39;
}
/* ---------- 03 about ---------- */
.ps_layers {
  margin: clamp(44px, 6vw, 72px) 0 0;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.ps_layer {
  border: 1px solid #21332a;
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 34px);
  background: #101f16;
}
.ps_layer_kanji {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 999px;
  padding: 5px 16px;
}
.ps_layer_ttl {
  margin: 18px 0 8px;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
}
.ps_layer_txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #a2aca4;
}
/* ---------- 04 versus ---------- */
.ps_versus_split {
  margin: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 56px);
  flex-wrap: wrap;
}
.ps_versus_side {
  text-align: center;
}
.ps_versus_cap {
  margin: 0 0 6px;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #5c615c;
}
.ps_versus_word {
  margin: 0;
  font-weight: 900;
  font-size: clamp(44px, 9vw, 96px);
  line-height: 1;
  color: #b3b8b2;
}
.ps_versus_word_new {
  color: #0d7a39;
}
.ps_versus_arrow {
  font-size: clamp(28px, 5vw, 48px);
  color: #0d7a39;
}
.ps_versus_scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ps_versus_table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: clamp(13px, 1.3vw, 15px);
}
.ps_versus_table th, .ps_versus_table td {
  padding: 16px 18px;
  border-bottom: 1px solid #dfe5df;
  text-align: left;
  vertical-align: middle;
}
.ps_versus_table thead th {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #5c615c;
  border-bottom: 2px solid #141816;
}
.ps_versus_table thead th.ps_versus_self {
  color: #0d7a39;
  font-weight: 700;
}
.ps_versus_table tbody th[scope="row"] {
  width: 26%;
  font-weight: 700;
  color: #141816;
}
.ps_versus_table td {
  color: #5c615c;
}
.ps_versus_table .ps_versus_self {
  background: rgba(34, 197, 94, 0.1);
  color: #141816;
  font-weight: 700;
}
.ps_disclaimer {
  margin: 20px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #5c615c;
}
/* ---------- 05 feature ---------- */
.ps_feature_rows {
  margin: clamp(44px, 6vw, 72px) 0 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid #21332a;
}
.ps_feature_row {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid #21332a;
}
.ps_feature_no {
  flex-shrink: 0;
  min-width: 64px;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  line-height: 1;
  color: #22c55e;
}
.ps_feature_ttl {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 700;
}
.ps_feature_txt {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #a2aca4;
}
/* ---------- 06 / 08 shots ---------- */
.ps_shot {
  margin: clamp(40px, 6vw, 72px) auto 0;
  max-width: 1180px;
  padding: 0 24px;
}
.ps_shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #dfe5df;
  box-shadow: 0 24px 60px rgba(20, 24, 22, 0.12);
}
.ps_shot_cap {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 18px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: #141816;
}
.ps_panel_dark .ps_shot_cap {
  color: #f4f7f4;
}
.ps_shot_tag {
  flex-shrink: 0;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0d7a39;
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 999px;
  padding: 4px 11px;
}
.ps_shot_pair {
  margin: 28px auto 0;
  max-width: 1180px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
}
.ps_shot_pair .ps_shot {
  margin: 0;
  max-width: none;
  padding: 0;
}
/* ---------- 07 ai ---------- */
.ps_ai_brains {
  margin: clamp(44px, 6vw, 64px) 0 0;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.ps_ai_brain {
  border: 1px solid #21332a;
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 32px);
  background: #101f16;
  text-align: center;
}
.ps_ai_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin: 0 0 16px;
  padding: 0 18px;
  background: #fbfbf9;
  border-radius: 10px;
}
.ps_ai_logo img {
  width: auto;
  height: auto;
  max-height: 30px;
  max-width: 100%;
}
.ps_ai_note {
  margin: 0;
  font-size: 13px;
  color: #a2aca4;
}
.ps_ai_chips {
  margin: 26px 0 0;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ps_ai_chips li {
  font-size: 13px;
  color: #f4f7f4;
  background: #101f16;
  border: 1px solid #21332a;
  border-radius: 999px;
  padding: 8px 16px;
}
/* ---------- 09 funclist ---------- */
/* グリッドは ul 専用クラス（ps_funcgrid）に限定。section と同名にすると
   section にも grid が効いて中身が圧縮されるため分離している */
.ps_funcgrid {
  margin: clamp(44px, 6vw, 64px) 0 0;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.ps_func {
  display: flex;
  flex-direction: column;
  min-height: 150px;
  border: 1px solid #21332a;
  border-radius: 14px;
  padding: clamp(20px, 2vw, 26px);
  background: #101f16;
}
.ps_func_no {
  margin: 0 0 14px;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #22c55e;
}
.ps_func_cat {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  line-height: 1.4;
}
.ps_func_sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #a2aca4;
}
.ps_func_hot {
  border-color: rgba(34, 197, 94, 0.55);
}
.ps_func_hot .ps_func_cat {
  color: #22c55e;
}
.ps_func_more {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
}
.ps_func_more_txt {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #a2aca4;
}
/* ---------- 10 case ---------- */
.ps_case_grid {
  margin: clamp(44px, 6vw, 64px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.ps_case_card {
  margin: 0;
}
.ps_case_thumb {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1.6;
}
.ps_case_thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps_case_name {
  margin: 16px 0 6px;
  font-size: 17px;
  font-weight: 700;
}
.ps_case_desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #5c615c;
}
.ps_logos {
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: clamp(24px, 3vw, 36px) 0 0;
  border-top: 1px solid #dfe5df;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
}
.ps_logos img {
  height: 34px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
}
/* ---------- 11 faq ---------- */
.ps_faq_list {
  margin: clamp(40px, 5vw, 56px) 0 0;
  border-top: 1px solid #21332a;
}
.ps_faq_item {
  border-bottom: 1px solid #21332a;
}
.ps_faq_item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2.4vw, 28px) 44px clamp(20px, 2.4vw, 28px) 0;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700;
  color: #f4f7f4;
}
.ps_faq_item summary::-webkit-details-marker {
  display: none;
}
.ps_faq_item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  font-weight: 400;
  color: #22c55e;
  transition: transform 0.3s ease;
}
.ps_faq_item[open] summary::after {
  content: "−";
}
.ps_faq_a {
  padding: 0 0 clamp(20px, 2.4vw, 28px);
}
.ps_faq_a p {
  margin: 0;
  max-width: 760px;
  font-size: 15px;
  line-height: 1.9;
  color: #a2aca4;
}
/* ---------- 12 cta ---------- */
.ps_cta {
  text-align: center;
}
.ps_cta_inner {
  max-width: 820px;
  text-align: center;
}
.ps_cta .ps_eyebrow {
  display: block;
}
.ps_cta_title {
  margin: 16px 0 0;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.04;
  letter-spacing: 0.01em;
}
.ps_cta .ps_hero_lead {
  margin-left: auto;
  margin-right: auto;
}
.ps_cta_actions {
  justify-content: center;
}
/* ---------- footer/pagetop: サイト共通 module 5 を使用するため LP 専用スタイルは廃止（2026-07-14） ---------- */
/* ---------- reveal ---------- */
.reveal, .reveal_group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is_in, .reveal_group.is_in > * {
  opacity: 1;
  transform: none;
}
.reveal_group.is_in > *:nth-child(2) {
  transition-delay: 0.08s;
}
.reveal_group.is_in > *:nth-child(3) {
  transition-delay: 0.16s;
}
.reveal_group.is_in > *:nth-child(4) {
  transition-delay: 0.24s;
}
.reveal_group.is_in > *:nth-child(5) {
  transition-delay: 0.32s;
}
.reveal_group.is_in > *:nth-child(6) {
  transition-delay: 0.4s;
}
.reveal_group.is_in > *:nth-child(7) {
  transition-delay: 0.48s;
}
.reveal_group.is_in > *:nth-child(8) {
  transition-delay: 0.56s;
}
/* =========================================================
   レスポンシブ（max-width 上書き）
   ========================================================= */
@media screen and (max-width: 1024px) {
  .pattern_poster .ps_funcgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 900px) {
  /* ヒーローは縦積み（コピー上・アニメ下）に */
  .pattern_poster .ps_layers, .pattern_poster .ps_ai_brains, .pattern_poster .ps_case_grid {
    grid-template-columns: 1fr;
  }
  .pattern_poster .ps_shot_pair {
    grid-template-columns: 1fr;
  }
  .pattern_poster .ps_hero_inner {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 44px);
  }
  .pattern_poster .ps_hero_stage {
    max-width: 300px;
  }
}
@media screen and (max-width: 640px) {
  /* スマホはヒーローを上詰めにしてアニメの分の高さを確保（中央寄せで上が切れないように） */
  /* スマホはアニメ下部チップと重なるためスクロールヒントを省略 */
  /* 比較テーブルが内部横スクロールできることを示すフェードヒント */
  .pattern_poster .ps_funcgrid {
    grid-template-columns: 1fr;
  }
  .pattern_poster .ps_hero {
    min-height: auto;
    padding: clamp(108px, 16vh, 150px) 0 72px;
  }
  .pattern_poster .ps_hero_stage {
    max-width: 240px;
  }
  .pattern_poster .ps_scroll {
    display: none;
  }
  .pattern_poster .ps_func_more {
    display: none;
  }
  .pattern_poster .ps_versus_scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, rgba(244, 247, 244, 0), rgba(244, 247, 244, 0.95));
    pointer-events: none;
  }
  .pattern_poster .ps_hero_actions, .pattern_poster .ps_cta_actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pattern_poster .ps_btn {
    width: 100%;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* ヒーローの収束アニメはブランドの中核表現のため reduce 環境でも動かし続ける
     （上の包括 reduce ルールに勝つよう高詳細度＋!important で再宣言） */
  .pattern_poster *, .pattern_poster *::before, .pattern_poster *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal_group > * {
    opacity: 1;
    transform: none;
  }
  .pattern_poster .ps_pack_ring {
    animation: ps_pack_spin 40s linear infinite !important;
  }
  .pattern_poster .ps_pack_box {
    animation: ps_pack_breathe 6s ease-in-out infinite !important;
  }
  .pattern_poster .ps_frag_1 {
    animation: ps_pack_1 6s cubic-bezier(0.5, 0, 0.2, 1) 0s infinite backwards !important;
  }
  .pattern_poster .ps_frag_2 {
    animation: ps_pack_2 6s cubic-bezier(0.5, 0, 0.2, 1) 0.5s infinite backwards !important;
  }
  .pattern_poster .ps_frag_3 {
    animation: ps_pack_3 6s cubic-bezier(0.5, 0, 0.2, 1) 1s infinite backwards !important;
  }
  .pattern_poster .ps_frag_4 {
    animation: ps_pack_4 6s cubic-bezier(0.5, 0, 0.2, 1) 1.5s infinite backwards !important;
  }
  .pattern_poster .ps_frag_5 {
    animation: ps_pack_5 6s cubic-bezier(0.5, 0, 0.2, 1) 2s infinite backwards !important;
  }
}
/* =========================================================
   versus グラフ型【縦棒チャート】（下から伸びる・poster固有）
   ========================================================= */
.ps_score {
  margin-top: clamp(36px, 5vw, 60px);
}
.ps_score_legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0 0 8px;
  font-size: 13px;
  color: #5c615c;
}
.ps_score_leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ps_score_leg i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.ps_score_leg_c i {
  background: linear-gradient(180deg, #22c55e, #0d7a39);
}
.ps_score_leg_g i {
  background: #b7bdb5;
}
.ps_cols {
  list-style: none;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
  align-items: start;
}
.ps_colgrp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
/* 棒は固定高＋共有ベースラインで全列の底辺を揃える */
.ps_col_bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  height: clamp(150px, 22vw, 210px);
  border-bottom: 2px solid #dfe5df;
}
.ps_col {
  position: relative;
  width: clamp(20px, 2.4vw, 30px);
  height: 100%;
  background: #e9ede7;
  border: 1px solid #dfe5df;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
/* fill は既定で満タン（JSがバーを伸ばすアニメを駆動。JS未動作でも満タン表示） */
.ps_col_fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--v);
  transform-origin: bottom center;
}
.ps_col_c .ps_col_fill {
  background: linear-gradient(180deg, #22c55e, #0d7a39);
}
.ps_col_g .ps_col_fill {
  background: #b7bdb5;
}
.ps_col_lvl {
  font-size: 12px;
  font-weight: 700;
  color: #0d7a39;
  line-height: 1.3;
}
.ps_col_name {
  font-size: 13px;
  font-weight: 700;
  color: #141816;
  line-height: 1.45;
}
.ps_colgrp_star .ps_col_lvl::after {
  content: "差別化";
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  color: #fbfbf9;
  background: #0d7a39;
  border-radius: 3px;
}
.ps_score_caption {
  margin: 22px 0 0;
  font-size: 12px;
  color: #5c615c;
}
@media (max-width: 900px) {
  .ps_cols {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
  }
}
@media (max-width: 640px) {
  .ps_col_bars {
    gap: 6px;
    height: 130px;
  }
  .ps_col {
    width: 22px;
  }
  .ps_col_name {
    font-size: 12px;
  }
}
/* =========================================================
   ▸ Refinement layer ─ 品質向上の追補（ダーク×グリーンのポスター）
   ヒーローの収束アニメは尊重し、粒子・陰影・コントラスト・
   余韻のあるリビールだけを上質化。末尾＝最終上書き。
   ========================================================= */
.pattern_poster {
  --ease_out: cubic-bezier(0.2, 0.74, 0.24, 1);
}
/* フィルミックな微粒子グレイン（暗部に効く・全面・操作非干渉） */
.pattern_poster::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}
/* ダークパネルのカードに奥行きと内側のかすかな縁 */
.pattern_poster .ps_layer {
  border-color: #2b3a30;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 60px -42px rgba(0, 0, 0, 0.85);
  transition: border-color 0.35s var(--ease_out), box-shadow 0.35s var(--ease_out), transform 0.35s var(--ease_out);
}
.pattern_poster .ps_layer:hover {
  border-color: #2c7748;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 36px 70px -40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(34, 197, 94, 0.12);
  transform: translateY(-3px);
}
/* 画面ショット・事例サムネに深い陰影＋グリーンの淡いアンビエント */
.pattern_poster .ps_shot img {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 40px 80px -44px rgba(0, 0, 0, 0.85);
}
.pattern_poster .ps_panel_dark .ps_shot img {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 44px 86px -44px rgba(0, 0, 0, 0.9), 0 0 60px -30px rgba(34, 197, 94, 0.35);
}
.pattern_poster .ps_case_thumb {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 34px 64px -42px rgba(0, 0, 0, 0.8);
  transition: transform 0.4s var(--ease_out), box-shadow 0.4s var(--ease_out);
}
.pattern_poster .ps_case_card:hover .ps_case_thumb {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), 0 44px 80px -40px rgba(0, 0, 0, 0.85), 0 0 50px -28px rgba(34, 197, 94, 0.4);
}
/* ボタン：グリーンのグローとリフト */
.pattern_poster .ps_btn {
  transition: background 0.3s var(--ease_out), color 0.3s var(--ease_out), border-color 0.3s var(--ease_out), box-shadow 0.32s var(--ease_out), transform 0.32s var(--ease_out);
}
.pattern_poster .ps_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -18px rgba(34, 197, 94, 0.55);
}
.pattern_poster .ps_header_cta {
  transition: background 0.3s var(--ease_out), color 0.3s var(--ease_out), box-shadow 0.3s var(--ease_out), transform 0.3s var(--ease_out);
}
.pattern_poster .ps_header_cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -16px rgba(34, 197, 94, 0.6);
}
.pattern_poster .ps_header.is_scrolled {
  box-shadow: 0 14px 36px -28px rgba(0, 0, 0, 0.9);
}
/* =========================================================
   versus 縦棒チャートのコントラスト改善（淡色地で見やすく）
   ========================================================= */
.pattern_poster .ps_col {
  background: rgba(20, 24, 22, 0.05);
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 0 0 1px rgba(20, 24, 22, 0.05);
}
.pattern_poster .ps_col_g .ps_col_fill {
  background: linear-gradient(180deg, #a4aca2, #8b948b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.pattern_poster .ps_col_c .ps_col_fill {
  background: linear-gradient(180deg, #22c55e, #0d7a39);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 22px -8px rgba(34, 197, 94, 0.6);
}
.pattern_poster .ps_score_leg_g i {
  background: linear-gradient(180deg, #a4aca2, #8b948b);
}
/* 一般CMSバーの到達文字も可読性を一段上げる */
.pattern_poster .ps_col_g .ps_col_lvl {
  color: #67706a;
}
/* =========================================================
   スクロールリビール：プレミアムなブラーイン
   ========================================================= */
.pattern_poster .reveal, .pattern_poster .reveal_group > * {
  transform: translateY(26px);
  filter: blur(7px);
  transition: opacity 0.9s var(--ease_out), transform 0.9s var(--ease_out), filter 0.9s var(--ease_out);
  will-change: opacity, transform, filter;
}
.pattern_poster .reveal.is_in, .pattern_poster .reveal_group.is_in > * {
  filter: blur(0);
}
.pattern_poster .reveal_group.is_in > *:nth-child(1) {
  transition-delay: 0s;
}
.pattern_poster .reveal_group.is_in > *:nth-child(2) {
  transition-delay: 0.07s;
}
.pattern_poster .reveal_group.is_in > *:nth-child(3) {
  transition-delay: 0.14s;
}
.pattern_poster .reveal_group.is_in > *:nth-child(4) {
  transition-delay: 0.21s;
}
.pattern_poster .reveal_group.is_in > *:nth-child(5) {
  transition-delay: 0.28s;
}
.pattern_poster .reveal_group.is_in > *:nth-child(6) {
  transition-delay: 0.35s;
}
.pattern_poster .reveal_group.is_in > *:nth-child(7) {
  transition-delay: 0.42s;
}
@media (prefers-reduced-motion: reduce) {
  .pattern_poster .reveal, .pattern_poster .reveal_group > * {
    filter: none;
    transform: none;
  }
}
/* =========================================================
   v2 polish ─ 闇と緑の精度：粒子・コントラスト・光帯の煌めき（最終上書き）
   ========================================================= */
/* 1) 暗部のグレインは控えめ＆ソフトに（バンディング解消にも効く） */
.pattern_poster::before {
  background-size: 160px 160px;
  opacity: 0.22;
  mix-blend-mode: soft-light;
}
/* 2) 暗パネルに最下の闇だまりと上の淡い光で奥行き */
.pattern_poster .ps_panel_dark {
  background-image: radial-gradient(120% 80% at 50% -10%, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0) 55%), radial-gradient(100% 60% at 50% 120%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 60%);
}
/* 3) シグネチャー＝CONTAINER の箱に走る光帯の煌めき（ゆっくり一閃） */
.pattern_poster .ps_pack_box {
  position: relative;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .pattern_poster .ps_pack_box::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(198, 255, 220, 0.5) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: ps_sheen 6s ease-in-out 1.2s infinite;
  }
  @keyframes ps_sheen {
    0%, 72%, 100% {
      transform: translateX(-120%);
    }
    84% {
      transform: translateX(120%);
    }
  }
}
/* 4) リビール時にごく淡いグリーンの発光 */
.pattern_poster .reveal.is_in .ps_big, .pattern_poster .reveal_group.is_in .ps_big {
  text-shadow: 0 0 32px rgba(34, 197, 94, 0.1);
}
/* 5) 見出しのコントラスト：白を冴えさせ、緑アクセントを一段明るく */
.pattern_poster .ps_big {
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.pattern_poster .ps_accent {
  color: #2fd571;
}
/* 6) ヘアライン罫を緑の微光グラデへ */
.pattern_poster .ps_feature_rows > li {
  border-image: linear-gradient(90deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.04) 70%, transparent) 1;
}
/* =========================================================
   logo bang ─ ヒーロー直下のロゴマーク登場（バーン！）
   黒地に緑の衝撃波＋リングを伴って、マークが弾むように登場
   ========================================================= */
.pattern_poster .ps_logobang {
  position: relative;
  height: 130vh;
  /* sticky 走行距離。可視ピンは 100vh、残り30vhがピン留め持続分（SNS流入の離脱抑制のため 170vh→130vh へ短縮 2026-07-14） */
  background: #0a1610;
}
.pattern_poster .ps_logobang_pin {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0a1610;
  overflow: hidden;
}
.pattern_poster .ps_logobang_inner {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 24px);
}
/* このセクションは汎用 reveal のフェードを使わずロゴ側の演出に委ねる（is_in 取得用にクラスのみ付与） */
.pattern_poster .ps_logobang_inner.reveal {
  opacity: 1;
  transform: none;
}
/* 背景オーラ：大きな放射光が広がり、ゆっくり脈打つ */
.pattern_poster .ps_logobang_inner::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(140vh, 150vw);
  height: min(140vh, 150vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16) 0%, rgba(34, 197, 94, 0.05) 40%, transparent 70%);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
}
/* ロゴ＋囲みCの中央ステージ。ロゴを前面にして、背後の大きな C がロゴを囲む */
.pattern_poster .ps_logobang_stage {
  position: relative;
  z-index: 3;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pattern_poster .ps_logobang_mark {
  position: relative;
  z-index: 2;
  width: clamp(100px, 22vw, 250px);
  /* C の中に収まるよう小さめ・画面幅(vw)で伸縮 */
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.55));
  opacity: 0;
  /* ①最初は消えていて、画面内でふわっと表れる */
}
.pattern_poster .ps_logobang_mark .ps_cube {
  opacity: 0;
}
/* ①キューブが下から積み上がる */
/* ④ワードマーク：C は1個だけ。最初は大きくロゴ上に出し、そのまま縮んで定位置に収まる */
.pattern_poster .ps_logobang_word {
  position: relative;
  z-index: 2;
  margin: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: visible;
  /* 大きなCがロゴ上にはみ出して囲うため */
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(48px, 10vw, 128px);
  /* 約2倍・画面幅(vw)で伸縮 */
  letter-spacing: 0.01em;
  color: #f4f7f4;
}
/* 最初に大きくロゴを囲む C ＝ そのまま縮んでワードマークの C に収まる（同一要素なので位置ズレなし） */
.pattern_poster .ps_logobang_c {
  display: inline-block;
  font-weight: 600;
  color: #22c55e;
  /* 正規ロゴの緑（暗背景版） */
  text-shadow: 0 0 40px rgba(34, 197, 94, 0.3);
  transform-origin: center center;
  opacity: 0;
}
.pattern_poster .ps_logobang_rest {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  color: #f4f7f4;
  opacity: 0;
}
/* 登場シーケンス（reduce 一括リセット 0.001ms!important に勝つため !important で再宣言）
   ①ロゴのキューブが積み上がる ＋ ②その最中に大きな緑Cがロゴの周りを囲う（同時進行）
   → ③Cが縮んで横へドック → ④ワードマーク展開 */
.pattern_poster .ps_logobang_inner.is_in::before {
  animation: ps_aura_in 1.3s ease 0.3s both, ps_aura_pulse 6s ease-in-out 1.9s infinite !important;
}
/* ロゴ（ステージ）を画面中心へ寄せて C と同心に。収束時に左の定位置へ戻す */
.pattern_poster .ps_logobang_inner.is_in .ps_logobang_stage {
  animation: ps_lb_stage 3.5s cubic-bezier(0.5, 0, 0.2, 1) 0s both !important;
}
/* ①ロゴ全体がふわっと（フェード＋わずかに浮上） */
.pattern_poster .ps_logobang_inner.is_in .ps_logobang_mark {
  animation: ps_lb_markin 1s ease 0.3s both !important;
}
/* ＋キューブが下から積み上がる（ロゴのアニメーション） */
.pattern_poster .ps_logobang_inner.is_in .ps_cube_bl {
  animation: ps_cube_rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both !important;
}
.pattern_poster .ps_logobang_inner.is_in .ps_cube_br {
  animation: ps_cube_rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both !important;
}
.pattern_poster .ps_logobang_inner.is_in .ps_cube_tp {
  animation: ps_cube_rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both !important;
}
/* ②その後、Cがロゴ上にぼんやり大きく現れ → そのまま縮んでワードマークCの定位置に収まる */
.pattern_poster .ps_logobang_inner.is_in .ps_logobang_c {
  animation: ps_lb_c 2s cubic-bezier(0.5, 0, 0.2, 1) 1.5s both !important;
}
/* ③Cが収まってから ontainer が左→右に表示されていく */
.pattern_poster .ps_logobang_inner.is_in .ps_logobang_rest {
  animation: ps_lb_rest 0.9s ease 3.6s both !important;
}
@keyframes ps_cube_rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px);
  }
  80% {
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ps_lb_markin {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ロゴを画面中心へ寄せて保持 → C移動と同じタイミングで左の定位置へ戻す
   （--ps-stage-shift はJSが実測して設定＝画面幅に依存せず常に中央） */
@keyframes ps_lb_stage {
  0%, 70% {
    transform: translateX(var(--ps-stage-shift, 0px));
  }
  100% {
    transform: translateX(0);
  }
}
/* C：ロゴ上に大きくぼんやり出現 → 縮小して定位置(transform:none)に収まる。
   開始は translateX(var(--ps-c-shift))＝JS実測でC箱を画面中心に置く・scale(8) で大きく囲む。
   終点は transform 解除＝in-flow の正位置なので「Container の C」に必ずピタリ収まる */
@keyframes ps_lb_c {
  0% {
    opacity: 0;
    -webkit-filter: blur(28px);
    filter: blur(28px);
    transform: translateX(var(--ps-c-shift, 0px)) scale(8);
  }
  /* ぼんやり出現（ロゴを囲む大きさ・位置） */
  30% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    transform: translateX(var(--ps-c-shift, 0px)) scale(8);
  }
  /* その場ではっきり（ロゴを囲んだまま） */
  48% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    transform: translateX(var(--ps-c-shift, 0px)) scale(8);
  }
  /* 一瞬ホールド */
  100% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
    transform: translateX(0) scale(1);
  }
  /* はっきりしてから移動して収まる */
}
/* ontainer が左→右に表示されていく */
@keyframes ps_lb_rest {
  0% {
    max-width: 0;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    max-width: 12em;
    opacity: 1;
  }
}
@keyframes ps_aura_in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes ps_aura_pulse {
  0%, 100% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1.06);
  }
}
/* =========================================================
   v3 ─ 実データ連携（2026-07-14）
   ① 機能一覧を現行9カテゴリへ更新 → 3列グリッド化
   ② 実績セクションはショートコード出力（/case/ の実データ）を
      ポスター調へ上書き。サムネは実サイトのスクリーンショットを表示
   ========================================================= */
/* ① 機能一覧：9カード＝3×3 */
.pattern_poster .ps_funcgrid {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 1024px) {
  .pattern_poster .ps_funcgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 640px) {
  .pattern_poster .ps_funcgrid {
    grid-template-columns: 1fr;
  }
}
/* ② __CASE_LIST__ 出力（.ct_case）のポスター調上書き */
.pattern_poster .ps_case_live {
  margin: clamp(40px, 6vw, 72px) 0 0;
}
.pattern_poster .ps_case_live .ct_case {
  padding: 0;
  background: transparent;
}
.pattern_poster .ps_case_live .ct_case + .ct_case {
  margin-top: clamp(44px, 6vw, 72px);
}
.pattern_poster .ps_case_live .ct_inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.pattern_poster .ps_case_live .ct_sec_eyebrow {
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #0d7a39;
  margin: 0 0 10px;
}
.pattern_poster .ps_case_live .ct_sec_heading {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 900;
  line-height: 1.3;
  color: #141816;
}
.pattern_poster .ps_case_live .ct_case_lead {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: #5c615c;
}
.pattern_poster .ps_case_live .ct_case_list {
  list-style: none;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
/* サムネ（/case/ 投稿の実スクリーンショット）を上部に表示 */
.pattern_poster .ps_case_live .ct_case_thumb {
  margin: 0;
  aspect-ratio: 1.7777777778;
  overflow: hidden;
  border-radius: 13px 13px 0 0;
  border-bottom: 1px solid #dfe5df;
  background: #eef2ee;
}
.pattern_poster .ps_case_live .ct_case_thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s var(--ease_out);
}
.pattern_poster .ps_case_live .ct_case_card:hover .ct_case_thumb img {
  transform: scale(1.03);
}
.pattern_poster .ps_case_live .ct_case_card {
  margin: 0;
  border: 1px solid #dfe5df;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(20, 24, 22, 0.05), 0 24px 48px -40px rgba(20, 24, 22, 0.45);
  transition: transform 0.35s var(--ease_out), box-shadow 0.35s var(--ease_out), border-color 0.35s var(--ease_out);
}
.pattern_poster .ps_case_live .ct_case_card:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 197, 94, 0.45);
  box-shadow: 0 4px 10px rgba(20, 24, 22, 0.06), 0 30px 56px -38px rgba(20, 24, 22, 0.5);
}
.pattern_poster .ps_case_live .ct_case_link {
  display: block;
  height: 100%;
  padding: 0;
  text-decoration: none;
  color: #141816;
}
.pattern_poster .ps_case_live .ct_case_body {
  display: block;
  padding: clamp(18px, 2.2vw, 26px);
}
.pattern_poster .ps_case_live .ct_case_tag {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0d7a39;
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 999px;
  padding: 3px 11px;
  background: transparent;
}
.pattern_poster .ps_case_live .ct_case_title {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 700;
  line-height: 1.5;
  color: #141816;
}
.pattern_poster .ps_case_live .ct_case_desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: #5c615c;
}
.pattern_poster .ps_case_live .ct_case_note {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: #5c615c;
}
.pattern_poster .ps_case_live .ct_case_note a {
  color: #0d7a39;
}
/* 「導入事例をくわしく見る」ボタン（紙地用ゴースト） */
.pattern_poster .ps_case_more_wrap {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
}
.pattern_poster .ps_btn_ghost_paper {
  border-color: rgba(20, 24, 22, 0.35);
  color: #141816;
}
.pattern_poster .ps_btn_ghost_paper:hover {
  background: rgba(20, 24, 22, 0.05);
  border-color: rgba(20, 24, 22, 0.6);
}
@media screen and (max-width: 640px) {
  .pattern_poster .ps_case_live .ct_case_list {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   v4 ─ 中間CV＋スマホ更新（2026-07-14）
   ① 07 mobile：mobilepost 実キャプチャをスマホフレームで
   ② 資料DLバンド：フォームなしの機能紹介資料（中間CV）
   ========================================================= */
/* ① スマホ更新セクション（暗パネル・ink2で前後の暗と差を付ける） */
.pattern_poster .ps_mobile {
  background: #101f16;
}
.pattern_poster .ps_mobile_grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.pattern_poster .ps_mobile_steps {
  margin: clamp(28px, 4vw, 40px) 0 0;
  list-style: none;
  padding: 0;
  border-top: 1px solid #21332a;
}
.pattern_poster .ps_mobile_step {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 20px) 0;
  border-bottom: 1px solid #21332a;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
  color: #f4f7f4;
}
.pattern_poster .ps_mobile_step_no {
  flex-shrink: 0;
  min-width: 30px;
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #22c55e;
}
.pattern_poster .ps_mobile_stage {
  text-align: center;
}
.pattern_poster .ps_phone {
  display: inline-block;
  margin: 0;
  max-width: min(280px, 72vw);
  padding: 10px;
  border: 1px solid #3b4f42;
  border-radius: 36px;
  background: #060f0a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 44px 86px -44px rgba(0, 0, 0, 0.9), 0 0 60px -30px rgba(34, 197, 94, 0.3);
}
.pattern_poster .ps_phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 27px;
}
/* ② 資料DLバンド（淡グリーン地＝case紙面と視覚分離） */
.pattern_poster .ps_dl {
  padding: clamp(52px, 7vw, 88px) 0;
  background: #e9f7ee;
  color: #141816;
  border-top: 1px solid #d5ecdd;
  border-bottom: 1px solid #d5ecdd;
}
.pattern_poster .ps_dl_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.pattern_poster .ps_dl_eyebrow {
  color: #0d7a39;
  margin-bottom: 14px;
}
.pattern_poster .ps_dl_title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.2;
}
.pattern_poster .ps_dl_lead {
  margin: 12px 0 0;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.9;
  color: #5c615c;
}
.pattern_poster .ps_dl_btn {
  flex-shrink: 0;
}
@media screen and (max-width: 900px) {
  .pattern_poster .ps_mobile_grid {
    grid-template-columns: 1fr;
  }
  .pattern_poster .ps_mobile_stage {
    margin-top: 8px;
  }
}
@media screen and (max-width: 640px) {
  .pattern_poster .ps_dl_inner {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .pattern_poster .ps_dl_btn {
    width: 100%;
    justify-content: center;
  }
}
/* 見出しの中間改行対策：07 mobile はカラム幅に収まるサイズへ＋語中で折らない */
.pattern_poster .ps_keep {
  white-space: nowrap;
}
.pattern_poster .ps_mobile_big {
  font-size: clamp(32px, 5vw, 60px);
}
/* 資料DLバンド内の詳細版テキストリンク */
.pattern_poster .ps_dl_sub_link {
  color: #0d7a39;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pattern_poster .ps_dl_sub_link:hover {
  opacity: 0.8;
}
/* ヒーローのバッジ行（0円・AI標準・一貫対応＝竹版表紙と同一訴求） */
.pattern_poster .ps_hero_badges {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #a2aca4;
}
.pattern_poster .ps_hero_badge {
  border: 1px solid #21332a;
  border-radius: 999px;
  padding: 6px 14px;
  background: rgba(16, 31, 22, 0.55);
  white-space: nowrap;
}
.pattern_poster .ps_hero_badge b {
  font-weight: 700;
}
/* =========================================================
   v5 ─ ヒーローバランス調整＋ロゴ/フッター共通化（2026-07-14）
   ・ヒーロー：左右均等グリッド＋右アニメ拡大＋タイトル控えめ
   ・ヘッダー：サイト共通のキューブロゴ＋Container ワード
   ・フッター：サイト共通 footer(MENU) に変更（LP専用フッター廃止）
   ========================================================= */
/* ヒーロー左右バランス */
.pattern_poster .ps_hero_inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
}
.pattern_poster .ps_hero_title {
  font-size: clamp(44px, 8vw, 92px);
}
.pattern_poster .ps_hero_stage {
  max-width: 500px;
}
.pattern_poster .ps_pack_box {
  width: 172px;
  height: 172px;
}
.pattern_poster .ps_pack_box::before {
  top: 44px;
}
/* ヘッダーロゴ（サイト共通スタイル準拠・白ロゴなので invert 無効化） */
.pattern_poster .ps_brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.pattern_poster .ps_brand img {
  filter: none;
  height: 28px;
  width: auto;
}
.pattern_poster .ps_brand_word {
  font-family: "Plus Jakarta Sans", "Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: #f4f7f4;
}
.pattern_poster .ps_brand_c {
  color: #22c55e;
}
/* サイト共通フッター直前の余白調整（LPの最終CTAと自然につながるように） */
.pattern_poster .ct_footer {
  margin-top: 0;
}
/* =========================================================
   v6 ─ ヒーローの収束アニメ強化（2026-07-14）
   暗色に沈んでいた右ステージへ視覚的質量を付与：
   緑のオーラ／ブランドキューブ入りの箱／明度を上げたリング・チップ
   ========================================================= */
/* 背後のオーラ（右側の質量） */
.pattern_poster .ps_hero_stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.14) 0%, rgba(34, 197, 94, 0.05) 45%, transparent 70%);
  pointer-events: none;
}
/* 箱：ガラス質の面＋緑グロー＋ブランドキューブ */
.pattern_poster .ps_pack_box {
  border: 1.5px solid rgba(34, 197, 94, 0.55);
  background: linear-gradient(165deg, rgba(24, 46, 33, 0.9), rgba(13, 27, 19, 0.9));
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.12), 0 18px 48px -18px rgba(0, 0, 0, 0.8), 0 0 56px -12px rgba(34, 197, 94, 0.45);
}
.pattern_poster .ps_pack_box::before {
  top: 34px;
}
.pattern_poster .ps_pack_mark {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5));
}
.pattern_poster .ps_pack_label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #eaf4ec;
}
/* 周回リング：緑の破線ではっきりと */
.pattern_poster .ps_pack_ring {
  border: 1.5px dashed rgba(34, 197, 94, 0.3);
}
/* 吸い込まれるチップ：明度アップ＋ひと回り大きく */
.pattern_poster .ps_frag {
  padding: 9px 18px;
  border: 1px solid rgba(34, 197, 94, 0.45);
  background: #16281d;
  color: #e2ece4;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6);
}
/* v5の均等グリッドがMQより後勝ちしてモバイルも2カラムになる不具合の修正 */
@media screen and (max-width: 900px) {
  .pattern_poster .ps_hero_inner {
    grid-template-columns: 1fr;
  }
}
/* 07スマホ更新(ink2)と08AI(ink)の暗×暗境界にヘアラインを1本 */
.pattern_poster .ps_mobile {
  border-bottom: 1px solid #1e3427;
}