/* --- heading 共通基底 --- */
.heading,
.achievement-num-label,
.achievement-num-large,
.step-badge-num,
.section-title,
.heading-sm,
.usecase-category-title,
.flow-days-unit,
.flow-days-tilde,
.flow-step-num,
.heading-accent,
.card-title,
.flow-step-label-text {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 140%;
  font-weight: 700;
  font-family: inherit;
}
h1 *{
  font-weight: bold;
}
.notice{
  display: block;
  font-size: 11px;
}
.achievement-num-label {
  letter-spacing: 0.04em;
}
.achievement-num-large {
  font-size: 80px;
  color: var(--color-chocolate);
}
.step-badge-num {
  letter-spacing: -0.05em;
  line-height: 120%;
}
.section-title {
  flex-shrink: 0;
  font-size: 30px;
  text-align: left;
}
.heading-sm {
  font-size: var(--fs-20);
  color: var(--color-black);
}
.usecase-category-title {
  font-size: var(--fs-48);
  color: var(--color-black);
  z-index: 1;
  flex-shrink: 0;
}
.flow-days-unit {
  font-size: var(--fs-40);
  color: var(--color-black);
}
.flow-days-tilde {
  color: var(--color-black);
}
.flow-step-num {
  font-size: var(--fs-60);
  letter-spacing: 0.03em;
  color: var(--color-chocolate);
  margin-top: -5px;
}
@media screen and (max-width:1080px){
    .section-title{
        font-size: 18px;
    }
}
.heading-accent {
  align-self: stretch;
  font-weight: bold;
}
.heading-accent *{
  font-weight: bold;
}
.card-title {
  flex: 1;
}
.flow-step-label-text {
  letter-spacing: 0.03em;
}

.header-parent {
width: 100%;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: normal;
letter-spacing: normal;
}
.section-top-img,
.case-card-img {
align-self: stretch;
position: relative;
max-width: 100%;
overflow: hidden;
max-height: 100%;
object-fit: cover;
}
.case-card-img {
  flex-shrink: 0;
}
.achievement,
.reason,
.case,
.flow,
.feature,
.lineup,
.faq {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  box-sizing:border-box;
}
.inner{
    max-width:100%;
}
.achievement {
  background-color: var(--color-ghostwhite);
}
.achievement .inner {
width: var(--width-1080);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--padding-64) var(--padding-24) var(--padding-80);
box-sizing: border-box;
gap: var(--gap-24);
text-align: right;
font-size: var(--fs-10);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
margin: 0 auto;
}
.achievement-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-size: var(--fs-18);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
}
.achievement-intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--gap-24);
}
.label-bold {
position: relative;
line-height: 140%;
font-weight: bold;
}
.divider-line {
width: var(--width-100);
height: var(--height-1);
position: relative;
background-color: var(--color-black);
}
.achievement-stats {
display: flex;
align-items: baseline;
justify-content: center;
gap: 11px;
font-size: var(--fs-40);
}
.achievement-num-group {
display: flex;
align-items: baseline;
position: relative;
isolation: isolate;
}
.achievement-exclaim-group {
display: flex;
align-items: center;
z-index: 1;
flex-shrink: 0;
}
.achievement-asterisk {
height: 20px;
width: 15px;
position: absolute;
margin: 0 !important;
top: 28px;
left: 163.8px;
font-size: var(--fs-14);
letter-spacing: 0.02em;
line-height: 140%;
display: inline-block;
z-index: 2;
flex-shrink: 0;
}
.achievement-logo-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-16);
}
.achievement-logo {
align-self: stretch;
background-color: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--padding-0) var(--padding-5);
}
.logo-img {
position: relative;
max-height: 100%;
object-fit: cover;
}
.achievement-logo-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 30px;
  row-gap: 15px;
  background-color: var(--color-white);
  padding: 30px 20px;
  box-sizing: border-box;
  width: 100%;
}
.achievement-logo-img {
  height: 50px;
  width: auto;
  object-fit: contain;
}
.achievement-note {
width: var(--width-1000);
position: relative;
letter-spacing: 0.02em;
line-height: 140%;
display: inline-block;
max-width:100%;
}
.reason .inner,
.lineup .inner {
width: var(--width-1080);
background-color: var(--color-white);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-0) var(--padding-0) var(--padding-80);
box-sizing: border-box;
gap: var(--gap-64);
text-align: right;
font-size: var(--fs-24);
color: var(--color-white);
font-family: var(--font-noto-sans-jp);
margin: 0 auto;
}
.reason-inner {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.faq-answer-body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-8);
}
.ttl-wrapper {
background-color: var(--color-black);
padding: 25px 30px;
margin-left: calc((100dvw - 1080px) / 2 * -1 - 20px);
padding-left: calc((100dvw - 1080px) / 2 + 20px);
}
@media screen and (max-width:1080px){
    .ttl-wrapper{
        padding: 20px;
        margin-left: -20px;
    }
}
.reason-lead {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-24);
text-align: center;
font-size: 36px;
color: var(--color-chocolate);
}
.text-plain {
color: var(--color-black);
}
.reason-note {
align-self: stretch;
position: relative;
font-size: var(--fs-16);
letter-spacing: 0.03em;
line-height: 150%;
color: var(--color-darkslategray);
}
.reason-steps {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--gap-24);
}
.reason-step {
width: var(--width-1000);
display: flex;
flex-wrap:wrap;
align-items: center;
justify-content: center;
gap: var(--gap-64);
text-align: left;
font-size: var(--fs-48);
color: var(--color-chocolate);
font-family: var(--font-noto-sans-jp);
max-width:100%;
}
.reason-step-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-20);
}
.reason-step-header-row {
align-self: stretch;
display: flex;
align-items: center;
gap: var(--gap-24);
}
.reason-step-badge {
width: 90px;
height: 90px;
border: 2px solid var(--color-chocolate);
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 8px;
}
.reason-step-info {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-6);
font-size: var(--fs-20);
color: var(--color-black);
}
.reason-step-heading {
align-self: stretch;
font-size: 24px;
display: flex;
justify-content: space-between;
align-items: center;
width: 330px;
}
.reason-step-heading h2{
  line-height: 1.3;
}
.reason-badge {
background-color: var(--color-chocolate);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 8px;
flex-shrink: 0;
font-size: 28px;
color: var(--color-white);
margin-left: 4px;
}
.reason-img {
width: 360px;
position: relative;
max-height: 100%;
object-fit: cover;
}
.reason-divider {
width: 1001px;
height: var(--height-1);
position: relative;
border-top: var(--border-1);
box-sizing: border-box;
}
.cta {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 80px;
}
.cta-section {
width: 100%;
background-color: var(--color-darkslateblue);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--padding-32) 20px var(--padding-64);
box-sizing: border-box;
gap: var(--gap-24);
max-width: 100%;
}
.cta-layout {
display: flex;
align-items: center;
gap: var(--gap-64);
text-align: center;
font-size: var(--fs-24);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
}
.cta-highlight {
height: 76px;
width: auto;
border-radius: var(--br-10);
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
padding: var(--padding-16) var(--padding-40) var(--padding-12);
box-sizing: border-box;
position: relative;
isolation: isolate;
gap: var(--gap-10);
}
.cta-message {
position: relative;
letter-spacing: 0.02em;
line-height: 140%;
z-index: 0;
flex-shrink: 0;
font-weight: bold;
}
.cta-message *{
  font-weight: bold;
}
.cta-keyword {
font-size: var(--fs-32);
color: var(--color-chocolate);
}
.vector-icon {
height: var(--height-24);
width: 38px;
position: absolute;
margin: 0 !important;
top: 25.6px;
right: -30px;
z-index: 1;
flex-shrink: 0;
}
.cta-character-icon {
height: 136px;
width: 119px;
position: relative;
}
.cta-actions {
display: flex;
flex-wrap:wrap;
align-items: center;
justify-content: space-between;
gap: 32px;
width: 100%;
max-width: var(--width-1080);
margin: 0 auto;
text-align: left;
font-size: var(--fs-16);
color: var(--color-white);
font-family: var(--font-noto-sans-jp);
}
/* ボタン列を拡幅（320px 固定 → コンテナ全幅） */
.cta-buttons {
  flex: 1 1 auto;
  max-width: 560px;
}
.cta-buttons,
.flow-step-info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-16);
}
.flow-step-info {
  flex: 1;
}
.cta-btn {
cursor: pointer;
border: none;
padding: var(--padding-10) var(--padding-32);
background-color: var(--color-darkorange);
width: 100%;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
gap: var(--gap-8);
  transition: filter 0.2s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.cta-chat-icon {
height: var(--height-36);
width: var(--width-36);
position: relative;
}
.cta-chat-icon-bg {
position: absolute;
height: 55.56%;
width: 72.22%;
top: 22.22%;
right: 13.89%;
bottom: 22.22%;
left: 13.89%;
border-radius: var(--br-2);
border: 2px solid var(--color-white);
box-sizing: border-box;
}
.cta-chat-icon-arrow {
position: absolute;
height: 16.67%;
width: 66.67%;
top: 37.5%;
right: 16.67%;
bottom: 45.83%;
left: 16.67%;
border-radius: var(--br-2);
max-width: 100%;
overflow: hidden;
max-height: 100%;
}
.cta-btn-label {
position: relative;
font-size: 22px;
line-height: 140%;
font-family: var(--font-noto-sans-jp);
font-weight: 700;
color: var(--color-white);
text-align: left;
}
.cta-doc-icon {
width: var(--width-36);
position: relative;
max-height: 100%;
}
.cta-divider {
height: 128px;
width: var(--width-2);
position: relative;
border: 1px solid var(--color-white);
box-sizing: border-box;
transform:  rotate(180deg);
}
.cta-note {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-4);
}
.cta-phone-row {
display: flex;
align-items: center;
gap: var(--gap-8);
font-size: 44px;
}
.cta-phone-icon {
height: 70px;
width: 49px;
position: relative;
}
.cta-phone-note {
align-self: stretch;
position: relative;
font-size: var(--fs-14);
line-height: 140%;
text-align: right;
}
.lineup-lead {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-0) var(--padding-40);
text-align: center;
font-size: var(--fs-16);
color: var(--color-darkslategray);
}
.lineup-lead-text {
align-self: stretch;
position: relative;
letter-spacing: 0.03em;
line-height: 150%;
}
.lineup-card-list {
align-self: stretch;
display: flex;
align-items: flex-start;
justify-content: center;
gap: var(--gap-24);
flex-wrap:wrap;
margin-right: auto;
margin-left: auto;
}
.lineup-card {
align-self: stretch;
flex: 1;
background-color: var(--color-ghostwhite);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--padding-40);
gap: var(--gap-16);
text-align: center;
font-size: var(--fs-24);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
max-width:640px;
}
.text-accent {
color: var(--color-chocolate);
}
.lineup-card-list .text-accent {
  color: var(--color-orange-deep);
}
.lineup-card-body {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-24);
text-align: left;
}
.badge-btn-red,
.badge-btn-blue {
  cursor: pointer;
  border: none;
  padding: var(--padding-5) var(--padding-24);
  border-radius: var(--br-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink:0;
}
.badge-btn-red {
  background-color: var(--color-firebrick);
}
.badge-btn-blue {
  background-color: var(--color-mediumblue);
}
.badge-label {
position: relative;
font-size: var(--fs-14);
line-height: 140%;
font-weight: 500;
font-family: var(--font-noto-sans-jp);
color: var(--color-white);
text-align: left;
}
.lineup-card-desc {
width: var(--width-408);
position: relative;
line-height: 140%;
display: inline-block;
}
.suprema-inc-biostar-wrapper {
width: var(--width-408);
height: var(--height-14);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-10);
color: var(--color-gray);
}
.suprema-inc-biostar {
height: var(--height-14);
width: var(--width-408);
position: relative;
line-height: 140%;
display: none;
}
.btn-more {
cursor: pointer;
border: var(--border-2);
padding: var(--padding-6) var(--padding-0) var(--padding-5) var(--padding-16);
background-color: var(--color-white);
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-8);
flex-shrink: 0;
z-index: 1;
margin-top: auto;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-more-sm {
width: var(--width-242_7);
margin-top: 0;
}
.btn-label-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: var(--padding-0) var(--padding-0) var(--padding-2);
}
.btn-label {
position: relative;
font-size: var(--fs-14);
line-height: 140%;
font-family: var(--font-noto-sans-jp);
color: var(--color-black);
text-align: left;
}
.btn-arrow-icon {
width: var(--width-24);
position: relative;
max-height: 100%;
transition:.3s;
}
.suprema-inc-biostar-container {
height: var(--height-14);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-10);
color: var(--color-darkslategray);
margin-top: 10px;}
.suprema-inc-biostar2 {
position: relative;
line-height: 140%;
display: inline-block;
}
.case .inner {
width: var(--width-1080);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-0) var(--padding-0) var(--padding-64);
box-sizing: border-box;
gap: var(--gap-40);
text-align: center;
color: var(--color-linen);
font-family: var(--font-noto-sans-jp);
margin: 0 auto;
}
.case-card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
gap: var(--gap-24);
max-width:100%;
}
.case-card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
box-shadow: var(--shadow-drop);
text-align: left;
font-size: var(--fs-24);
color: var(--color-chocolate);
font-family: var(--font-noto-sans-jp);
background: var(--color-ghostwhite);
}
.case-card span{
  color: #000;
  display:inline-block;
  margin-left: 5px;
}
.case-card-body h3{
  color: var(--color-orange-deep);
}
.case-card-body {
background-color: var(--color-ghostwhite);
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
padding: 0 var(--padding-24) var(--padding-24);
gap: var(--gap-16);
}
.card-header-row,
.product-header-row {
align-self: stretch;
border-bottom: var(--border-11);
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--padding-0) var(--padding-0) var(--padding-16);
}
.product-header-row {
  gap: var(--gap-20);
}
.product-header-row h3{
  display: flex;
  gap:0 10px;
  align-items: flex-end;
}
.product-header-row h3 small{
  height:28px;
}
@media screen and (max-width:480px){
  .product-header-row h3{
    flex-wrap:wrap;
  }
  .product-header-row h3 small{
    line-height: 1.5;
    height: auto;
  }
}
.case-card-company {
width: 269px;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-4);
}
.card-body-content {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-16);
font-size: var(--fs-16);
color: var(--color-darkslategray);
height: 100%;
}
.text-stretch {
align-self: stretch;
position: relative;
line-height: 140%;
}
.case-card-meta {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-12);
font-size: var(--fs-12);
color: var(--color-black);
}
.case-meta-item,
.card-content {
align-self: stretch;
display: flex;
align-items: flex-start;
gap: var(--gap-16);
}
.card-content {
  flex-direction: column;
}
.case-label {
background-color: var(--color-white);
border: var(--border-1);
display: flex;
align-items: center;
justify-content: center;
padding: var(--padding-2) var(--padding-8) var(--padding-3);
}
.case-meta-text {
flex: 1;
position: relative;
font-size: var(--fs-14);
line-height: 140%;
color: var(--color-darkslategray);
}
.case-card-company-alt {
width: 269px;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-4);
}
.voice-company-name {
flex: 1;
position: relative;
line-height: 140%;
}
.usecase-category {
width: var(--width-1080);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--padding-0) var(--padding-0) var(--padding-64);
box-sizing: border-box;
gap: var(--gap-40);
max-width:100%;
}
.usecase-category-header {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
padding: var(--padding-64) var(--padding-0) var(--padding-0);
position: relative;
isolation: isolate;
gap: var(--gap-16);
}
.ttl-en {
margin: 0 !important;
height: 120px;
width: 100%;
text-align: center;
position: absolute;
top: 15.8px;
left: 0;
font-size: 120px;
letter-spacing: 0.02em;
line-height: 100%;
font-weight: 700;
font-family: inherit;
display: inline-block;
color: #fde3c9;
z-index: 0;
flex-shrink: 0;
}
@media screen and (max-width:1080px){
    .ttl-en{
        font-size: 90px;
    }
}
.usecase-category-desc {
position: relative;
font-size: var(--fs-18);
line-height: 140%;
color: var(--color-darkslategray);
z-index: 2;
flex-shrink: 0;
}
.usecase-detail-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-80);
}
.usecase-card-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
box-sizing: border-box;
column-gap: var(--gap-32);
row-gap: var(--gap-16);
text-align: left;
font-size: var(--fs-24);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
margin: 0 auto;
}
.feature-usecase-card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
.feature-usecase-card .card-content {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
align-self: stretch;
}
.usecase-card-img {
position: relative;
max-height: 100%;
max-width:100%;
object-fit: cover;
}
.ic-wrapper,
.lineup-card-text {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: var(--fs-16);
color: var(--color-darkslategray);
}
.lineup-card-text {
  gap: var(--gap-4);
}
.feature-voices {
align-self: stretch;
background-color: var(--color-ghostwhite);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--padding-32);
gap: var(--gap-32);
text-align: left;
font-size: var(--fs-32);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
max-width:100%;
}
.voice-card-list {
align-self: stretch;
display: flex;
flex-wrap:wrap;
align-items: flex-start;
justify-content: center;
gap: var(--gap-20);
font-size: var(--fs-20);
}
.voice-card {
align-self: stretch;
flex: 1;
background-color: var(--color-white);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-24);
position: relative;
isolation: isolate;
gap: var(--gap-16);
}
.voice-card-content,
.voice-card-content-alt {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-16);
z-index: 0;
flex-shrink: 0;
}
.voice-card-content-alt {
  flex: 1;
}
.voice-company-row {

align-self: stretch;
display: flex;
align-items: center;
flex-shrink: 0;
}
.voice-card-desc {

align-self: stretch;
position: relative;
font-size: var(--fs-16);
line-height: 140%;
color: var(--color-darkslategray);
flex-shrink: 0;
}
.voice-corner {
width: var(--width-41);
height: var(--height-40);
position: absolute;
margin: 0 !important;
right: -0.3px;
bottom: 0px;
z-index: 2;
flex-shrink: 0;
}
.corner-line-v {
position: absolute;
right: 0px;
bottom: 0px;
background-color: var(--color-chocolate);
width: var(--width-2);
height: var(--height-40);
}
.corner-line-h {
position: absolute;
right: 39px;
bottom: -40px;
background-color: var(--color-chocolate);
width: var(--width-2);
height: var(--height-40);
transform:  rotate(-90deg);
transform-origin: 0 0;
}
.voice-corner-icon {
width: var(--width-41);
position: absolute;
margin: 0 !important;
top: 0px;
left: 0px;
max-height: 100%;
object-fit: contain;
z-index: 3;
flex-shrink: 0;
}
.other-usecases {
width: var(--width-1080);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-40);
font-size: 44px;
color: var(--color-black);
max-width:100%;
}
.other-usecases-title-outer {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
}
.other-usecases-title-inner {
display: flex;
align-items: flex-end;
justify-content: center;
}
.other-usecases-title-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: var(--padding-0) var(--padding-0) var(--padding-8);
}
.other-usecase-grid-wrap {
width: var(--width-1000);
display: flex;
flex-wrap:wrap;
flex-direction: column;
align-items: center;
text-align: left;
font-size: var(--fs-16);
max-width:100%;
}
.other-usecase-list {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
box-sizing: border-box;
gap: 20px;
max-width: 100%;
}
.other-usecase-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-16);
max-width:calc((100% - 20px) / 2);
}
.other-usecase-img {
width: var(--width-180);
max-width:100%;
position: relative;
object-fit: cover;
}
.flow .inner,
.faq .inner {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-0) var(--padding-0) var(--padding-80);
gap: var(--gap-32);
text-align: right;
font-size: var(--fs-24);
color: var(--color-white);
font-family: var(--font-noto-sans-jp);
margin: 0 auto;
width: 1080px;
max-width:100%;
}
.flow-summary {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--padding-0) var(--padding-40);
text-align: center;
font-size: var(--fs-24);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
}
.flow-summary-lead {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-24);
}
.flow-summary-days {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--gap-8);
font-size: var(--fs-40);
color: var(--color-chocolate);
}
.flow-summary-days-range {
display: flex;
align-items: baseline;
font-size: var(--fs-64);
}
.flow-steps-detail {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-16);
}
.flow-step-card-wide,
.flow-step-card {
  background-color: var(--color-ghostwhite);
  display: flex;
  align-items: center;
  padding: var(--padding-24) var(--padding-40);
  gap: var(--gap-40);
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-black);
  font-family: var(--font-noto-sans-jp);
  max-width:100%;
  box-sizing:border-box;
}
.flow-step-card {
  width: var(--width-1000);
  box-sizing: border-box;
}
.flow-step-left,
.flow-step-main-row {
align-self: stretch;
display: flex;
align-items: center;
gap: var(--gap-40);
}
.flow-step-main-row {
  flex-shrink: 0;
}
.flow-step-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: var(--padding-5) var(--padding-0) var(--padding-0);
}
.flow-step-divider {
align-self: stretch;
width: var(--width-2);
position: relative;
border: var(--border-1);
box-sizing: border-box;
transform:  rotate(180deg);
}
.flow-step-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-32);
font-size: var(--fs-32);
}
.section-description,
.body-text {
align-self: stretch;
position: relative;
font-size: var(--fs-16);
line-height: 160%;
}
.body-text {
  color: var(--color-darkslategray);
}
.link-inherit {
color: inherit;
}
.link-underline {
text-decoration: underline;
}
.flow-step-img {
height: var(--height-124);
width: var(--width-124);
position: relative;
object-fit: cover;
}
.flow-step-checklist-hidden {
display: none;
align-items: flex-start;
justify-content: center;
gap: var(--gap-40);
flex-shrink: 0;
text-align: center;
font-size: var(--fs-24);
color: var(--color-gray);
}
.flow-checklist-box {
min-width:0;
width: 100%;
flex:1 1 50%;
background-color: var(--color-white);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-16) var(--padding-24);
box-sizing: border-box;
gap: var(--gap-16);
}
.checklist {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-6);
text-align: left;
font-size: var(--fs-14);
}
.checklist-item {
align-self: stretch;
display: flex;
align-items: flex-start;
gap: var(--gap-10);
flex-shrink: 0;
}
.checklist-icon {
width: var(--width-26);
position: relative;
max-height: 100%;
}
.checklist-text {
position: relative;
line-height: 200%;
}
.flow-arrow {
width: 120px;
height: var(--height-16);
position: relative;
}
.flow-step-checklist {
  width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
gap: var(--gap-40);
text-align: center;
font-size: var(--fs-24);
}
@media screen and (max-width:1080px){
  .flow-step-checklist{gap:20px;flex:1 1 0;}
}
.flow-step-body-wide {
width: 765px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-32);
font-size: var(--fs-32);
}
.checklist-item-hidden {
width: 314px;
display: none;
align-items: flex-start;
gap: var(--gap-10);
flex-shrink: 0;
color: var(--color-gray);
}
.faq-list {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
color: var(--color-black);
}
.accordion {
width: 963px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
font-size: var(--fs-24);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
max-width:100%;
}
.accordion-trigger {
align-self: stretch;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
padding: var(--padding-24) var(--padding-40);
gap: var(--gap-24);
}
.accordion-trigger-warm {
background-color: var(--color-antiquewhite);
}
.accordion-trigger-cool {
background-color: var(--color-ghostwhite);
}
.faq-question-icon {
width: 56px;
position: relative;
max-height: 100%;
}
.faq-toggle-icon {
width: var(--width-40);
position: relative;
max-height: 100%;
object-fit: cover;
}
.faq-answer-card {
align-self: stretch;
border: 1px solid var(--color-lightsteelblue-100);
display: flex;
align-items: center;
padding: var(--padding-24) var(--padding-40);
font-size: var(--fs-20);
}
.faq-answer-header {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-8);
}
.accordion-panel {
align-self: stretch;
border: 1px solid var(--color-lightsteelblue-100);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: var(--padding-22) 39px;
gap: var(--gap-16);
text-align: left;
font-size: var(--fs-20);
color: var(--color-black);
font-family: var(--font-noto-sans-jp);
}
.faq-img {
align-self: stretch;
height: 458px;
position: relative;
max-width: 100%;
overflow: hidden;
flex-shrink: 0;
object-fit: cover;
}
.faq-flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-16);
  align-self: stretch;
  background-color: var(--color-ghostwhite);
  padding: var(--padding-24);
}
.faq-flow-card {
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--gap-16);
  padding: var(--padding-24);
}
.faq-flow-header {
  display: flex;
  align-items: center;
  gap: var(--gap-16);
}
.faq-flow-num {
  font-size: var(--fs-40);
  font-weight: 700;
  color: var(--color-chocolate);
  line-height: 1;
  flex-shrink: 0;
}
.faq-flow-divider {
  width: 1px;
  height: 32px;
  background-color: #ccc;
  flex-shrink: 0;
}
.faq-flow-title {
  margin: 0;
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1.4;
}
.faq-flow-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.feature .inner {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-0) var(--padding-0) 56px;
box-sizing: border-box;
gap: var(--gap-32);
flex-shrink: 0;
width: 1080px;
max-width: 100%;
text-align: right;
font-size: var(--fs-24);
color: var(--color-white);
font-family: var(--font-noto-sans-jp);
margin:0 auto;
}
.feature-inner {
  width: 1080px;
  margin: 0 auto;
background-color: var(--color-white);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-0);
box-sizing: border-box;
max-width: 100%;
}
.feature-img-row {
  width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-48);
max-width: 100%;
}
.feature-inner a:hover{
opacity:.7;
}
.feature-img {
  width: auto;
position: relative;
max-width: 100%;
}



/* ===== hover アクション ===== */

.btn-more:hover img {
  transform:translateX(5px);
}


.cta-btn:hover {
  filter: brightness(0.88);
}

.badge-btn-red:hover,
.badge-btn-blue:hover {
  filter: brightness(0.85);
  transform: translateY(-1px);
  transition: filter 0.2s ease, transform 0.2s ease;
}


.accordion-trigger:hover {
  filter: brightness(0.96);
  transition: filter 0.15s ease;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   768px : tablet
   640px : small tablet / large mobile
   480px : mobile (covers 375px minimum)
═══════════════════════════════════════════════════════ */

/* ── 640px ────────────────────────────────────────── */
@media screen and (max-width: 640px) {
  .achievement .inner {
    padding-left: 0;
    padding-right: 0;
  }
  .achievement-logo-grid {
    padding: 20px 15px;
    row-gap: 10px;
  }
  .achievement-logo-img {
    height: 40px;
  }
}

/* ── 768px ────────────────────────────────────────── */
@media screen and (max-width: 768px) {

  /* ─ containers ─ */
  .reason .inner,
  .lineup .inner {
    width: 100%;
    box-sizing: border-box;
    gap: var(--gap-40);
  }
  .case .inner {
    width: 100%;
    box-sizing: border-box;
  }

  /* ─ achievement ─ */
  .achievement-stats {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 32px;
  }
  .achievement-num-large { font-size: 56px; }
  .achievement-note { width: 100%; }

  /* ─ reason ─ */
  .reason-lead {
    font-size: 26px;
  }
  .reason-step {
    flex-direction: column;
    gap: var(--gap-32);
  }
  .reason-img {
    width: 100%;
    max-width: 400px;
    align-self: center;
  }
  .reason-divider { width: 100%; }

  /* ─ CTA ─ */
  .cta-section {
    padding-left: var(--padding-16);
    padding-right: var(--padding-16);
  }
  .cta-layout{
    flex-wrap:wrap;
    align-items: center;
    gap:20px;
    font-size: 18px;
  }
  .cta-keyword{
    font-size: 24px;
  }
  .cta-highlight {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 56px;
    padding: 10px;
  }
  .cta-message{
    display: flex;
    flex-wrap:wrap;
    flex-shrink:1;
    justify-content: center;
  }
  .cta-character-icon{margin: 0 auto;}
  .vector-icon { display: none; }
  .cta-divider { display: none; }
  .cta-phone-row { font-size: 32px; }
  .cta-phone-note{text-align: center;}
  .cta-btn { width: 100%; }
  .cta-note{gap:0;align-items: center;}

  /* ─ lineup ─ */
  .lineup-card-list {
    max-width:100%;
    flex-direction: column;
    align-items: stretch;
  }
  .lineup-card { padding: var(--padding-24); flex: none; }
  .lineup-card-desc,
  .suprema-inc-biostar-wrapper,
  .suprema-inc-biostar-container { width: 100%; max-width: 100%; }
  .badge-btn-red, .badge-btn-blue{padding:5px 10px;}
  .badge-label {font-size: 12px;}
  /* ─ case ─ */
  .case-card-list {
    grid-template-columns: 1fr;
  }
  .case-card-company,
  .case-card-company-alt { width: 100%; }
  .card-title{font-size: 16px;}
  .case-card-company h3,.case-card-company-alt h3{font-size: 18px;}
  /* ─ feature / usecases ─ */
  .ttl-en {
    font-size:60px;
    width: auto;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .usecase-card-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: var(--gap-16);
    justify-content: flex-start;
  }
  .usecase-category-title{
    font-size: 36px;
  }
  .other-usecases { width: 100%; max-width: 100%; }
  .feature-img { width: 100%; max-width: 100%; }
  .feature-img-row { flex-direction: column; align-items: center; gap:20px;}
  .voice-card-list{
    flex-direction:column;
    gap:20px;
  }
  .voice-card{
    width: 100%;
    box-sizing:border-box;
  }

  /* ─ flow ─ */
  .flow-summary {
    padding-left: var(--padding-16);
    padding-right: var(--padding-16);
  }
  .flow-summary-days{flex-wrap:wrap;margin-top: 20px;}
  .flow-summary-days *{line-height: 1;}
  .flow-summary-days .heading{width: 100%; text-align: center;}
  .flow-step-left {
    align-self: auto;
    justify-content: flex-start;
  }
  .flow-step-checklist{flex-direction:column;}
  .flow-step-checklist h3{font-size: 16px;}
  .flow-step-divider { display: none; }
  .flow-step-card,
  .flow-step-card-wide {
    padding-left: var(--padding-16);
    padding-right: var(--padding-16);
    width: 100%;
    box-sizing: border-box;
    flex-direction:column;
    gap:0px;
  }
  .flow-checklist-box{padding: 12px;}
  .flow-step-body{gap:20px}
  .flow-step-label{padding-top: 0;}
  .flow-step-label *{line-height: 1;}
  .flow-step-body-wide { width: 100%; max-width: 100%; }
  .flow-checklist-box { width: 100%; max-width: 100%; }

  .section-description{font-size: 14px;}
  /* ─ FAQ ─ */
  .accordion { width: 100%; font-size: 18px; }
  .faq-answer-card,
  .accordion-panel {
    padding: var(--padding-16) var(--padding-24);
    font-size: 18px;
  }
  .accordion-trigger { padding: var(--padding-16) var(--padding-24); }
  .faq-img { height: auto; }
  .faq-flow-grid { grid-template-columns: 1fr; padding: var(--padding-16); }
  .faq-flow-card { padding: var(--padding-16); }
  .faq-flow-num { font-size: var(--fs-32); }
}

/* ── 480px (covers 375px) ─────────────────────────── */
@media screen and (max-width: 480px) {

  /* ─ typography ─ */
  .achievement-stats { font-size: 20px; }
  .achievement-num-large { font-size: 32px; }
  .usecase-category-title { font-size: var(--fs-24); }
  .reason-lead { font-size: 20px; }
  .ttl-en { font-size: 48px; }
  .cta-phone-row { font-size: 24px; }
  .other-usecases { font-size: var(--fs-32); }
  .flow-step-num { font-size: var(--fs-40); }
  .step-badge-num { font-size: var(--fs-32); }

  .feature-voices{
    padding: 20px;
  }
  .feature-voices h2{font-size: 24px;}
  .usecase-card-list {
    grid-template-columns: 1fr;
  }
  .flow-step-main-row{gap:20px;}
  .flow-step-card,
  .flow-step-card-wide {
    padding-left: var(--padding-10);
    padding-right: var(--padding-10);
    gap:10px;
  }
  .flow-step-img{
    width: 80px;
    height: 80px;
  }
  .flow-summary-days{font-size: 24px;}
  .flow-summary-days-range{font-size: 48px;}
  .lineup-card { padding: var(--padding-16);font-size: 20px; }
  .flow-step-info h2{font-size: 18px;}
  .flow-step-label-text{font-size: 14px;}
  .flow-step-num{font-size: 36px;padding-top: 5px;}
  /* ─ achievement ─ */
  .achievement-asterisk {
    position: static;
    display: inline-block;
    vertical-align: super;
    font-size: var(--fs-12);
    height: auto;
    width: auto;
  }

  /* ─ reason ─ */
  .reason-step-info{gap:0;}
  .reason-step-badge { width: 56px; height: 56px; }
  .reason-step-header-row {flex-direction:column;gap:10px;align-items: flex-start;}
  .reason-badge{padding: 2px 4px; font-size: 24px;}
  .reason-step-heading{width: 310px;}
  /* ─ CTA ─ */
  .cta-highlight { padding: var(--padding-12) var(--padding-16); }
  .cta-layout { gap: var(--gap-24); }
  .cta-actions { gap: var(--gap-24); }
  .cta-buttons { width: 100%; }

  /* ─ flow ─ */
  .flow-summary-days {
    flex-wrap: wrap;
    justify-content: center;
  }

  .section-description{font-size: 12px;}
  /* ─ FAQ ─ */
  .accordion{
    font-size: 14px;
  }
  .accordion-trigger {
    padding: var(--padding-12) var(--padding-16);
    gap: var(--gap-12);
  }
  .faq-answer-card,
  .accordion-panel {
    padding: var(--padding-16) var(--padding-16);
    font-size: 14px;
  }
  .faq-question-icon { width: 40px; }
  .faq-toggle-icon{width: 32px;}
}

/* ─ 導入費用ダイアグラム ─ */
.cost-diagram {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: var(--font-noto-sans-jp);
  margin-top: 10px;
}
.cost-label {
  display: inline-block;
  border: 3px solid #ff8021;
  padding: 16px;
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 140%;
}
.cost-boxes {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.cost-box {
  flex: 1;
  border: 3px solid #ff8021;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.cost-box-title {
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 700;
  line-height: 140%;
  font-family: inherit;
}
.cost-box-sub {
  font-size: var(--fs-14);
  font-weight: 400;
  display: block;
}
.cost-box-list {
  margin: 0;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-14);
  line-height: 160%;
  list-style-type: disc !important;
}
.cost-box-list li {
  display: list-item;
  list-style-type: disc !important;
}
.cost-plus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  font-size: 32px;
  font-weight: 700;
  color: #ff8021;
}

@media screen and (max-width: 768px) {
  .cost-boxes {
    flex-direction: column;
    gap: 0;
  }
  .cost-plus {
    width: auto;
    height: 40px;
    font-size: 28px;
  }
  .cost-box-title { font-size: var(--fs-18); }
  .cost-box-list { font-size: var(--fs-14); }
}

@media screen and (max-width: 480px) {
  .cost-label { font-size: var(--fs-14); }
  .cost-box { padding: 14px 16px; }
  .cost-box-title { font-size: var(--fs-16); }
  .cost-box-list { font-size: 13px; }
  .cost-plus { font-size: 24px; height: 32px; }
}

/* ─ 認証方式比較テーブル ─ */
.auth-table-wrap {
  align-self: stretch;
  overflow-x: auto;
}
.auth-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-noto-sans-jp);
  font-size: var(--fs-14);
  line-height: 160%;
}
.auth-table th,
.auth-table td {
  border: 1px solid #000;
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.auth-table thead th {
  background-color: #f6e2d4;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.auth-table tbody td {
  background-color: #fff;
}
.auth-table tbody tr:nth-child(even) td {
  background-color: #fafafa;
}

@media screen and (max-width: 768px) {
  .auth-table { font-size: 13px; }
  .auth-table th,
  .auth-table td { padding: 8px 8px; }
}

@media screen and (max-width: 480px) {
  .auth-table { font-size: 12px; }
  .auth-table th,
  .auth-table td { padding: 6px 6px; }
}

/* ===== value-bridge : reason → cta の間に置く独自性訴求ブロック ===== */
.value-bridge {
  /* グレー背景上でコントラストを上げた一段濃いオレンジ */
  --vb-accent: var(--color-orange-deep);
  width: 100%;
  padding: 0 20px 48px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
/* オレンジの太枠＋パネル影で“止める”掲示ブロック（ボタンには見せない） */
.value-bridge-card {
  position: relative;
  width: 100%;
  max-width: var(--width-1080);
  box-sizing: border-box;
  padding: 44px 40px 48px;
  text-align: center;
  font-family: var(--font-noto-sans-jp);
  background: var(--color-ghostwhite);
  border: 4px solid var(--vb-accent);
  box-shadow: 0 14px 34px rgba(19, 37, 75, 0.12);
}
/* 太枠の内側にもう一本オレンジの細枠（このLPで未使用の二重枠装飾） */
.value-bridge-card::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 7px;
  right: 7px;
  bottom: 7px;
  border: 2px solid var(--vb-accent);
  pointer-events: none;
}
.value-bridge-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-size: var(--fs-18);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-darkslategray);
}
.value-bridge-eyebrow::before,
.value-bridge-eyebrow::after {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--vb-accent);
}
/* 本文：連結語（や業種・業態に合わせた / にも柔軟に対応。）でサイズ・ウェイトを統一 */
.value-bridge-body {
  position: relative;
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-darkslateblue);
}
/* 締め：連結語（御社の環境に合わせた / を実現します。）でサイズ・ウェイトを統一 */
.value-bridge-hero {
  position: relative;
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-darkslateblue);
}
/* PC では本文・締めを 1 行に収める */
@media screen and (min-width: 1081px) {
  .value-bridge-body,
  .value-bridge-hero { white-space: nowrap; }
}
.vb-key {
  font-weight: 700;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--vb-accent);
  color: var(--vb-accent);
}
/* 締めキーワードも他キーワードと同様の下線に */
.vb-key--hero {
  font-weight: 700;
  padding: 0 0 2px;
  border-bottom: 2px solid var(--vb-accent);
  color: var(--vb-accent);
  background: none;
}
/* CTA へ視線を送る下向き矢印 */
.value-bridge-arrow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  height: 44px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: var(--vb-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 0 6px rgba(242, 106, 0, 0.16), 0 6px 14px rgba(19, 37, 75, 0.22);
}
.value-bridge-arrow::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: -3px;
  border-right: 3px solid var(--color-white);
  border-bottom: 3px solid var(--color-white);
  transform: rotate(45deg);
}

@media screen and (max-width: 768px) {
  .value-bridge { padding: 0 16px 40px; }
  .value-bridge-card { padding: 36px 20px 42px; }
  .value-bridge-eyebrow { font-size: var(--fs-16); gap: 10px; margin-bottom: 12px; }
  .value-bridge-eyebrow::before,
  .value-bridge-eyebrow::after { width: 18px; }
  .value-bridge-body { font-size: var(--fs-18); line-height: 1.8; }
  .value-bridge-hero { font-size: var(--fs-24); line-height: 1.7; }
}
@media screen and (max-width: 480px) {
  .value-bridge-card { padding: 30px 16px 38px; }
  .value-bridge-eyebrow { font-size: 14px; gap: 8px; }
  .value-bridge-eyebrow::before,
  .value-bridge-eyebrow::after { width: 12px; }
  .value-bridge-body { font-size: var(--fs-16); }
  .value-bridge-hero { font-size: 20px; }
  .value-bridge-arrow { width: 40px; height: 40px; }
}

/* =========================================================================
   value-bridge / CTA アニメーション
   矢印とボタンを同周期(1.5s)・同イージングで伸縮させ、視線を上→下へ誘導。
   静的な強調（枠・影・拡幅）は各 base ルールに統合済み。
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* 矢印がゆっくり上下して視線を CTA へ落とす */
  .value-bridge-arrow {
    animation: vbArrowBounce 1.5s ease-in-out infinite;
  }
  /* ボタンは矢印と同位相で“緩やかに絶え間なく”伸縮＋グロー */
  .cta-btn {
    animation: ctaBreathe 1.5s ease-in-out infinite;
  }
}
@keyframes vbArrowBounce {
  0%,
  100% {
    transform: translate(-50%, 50%);
  }
  50% {
    transform: translate(-50%, calc(50% + 7px));
  }
}
@keyframes ctaBreathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 0 0 0 rgba(255, 128, 33, 0);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 0 24px 5px rgba(255, 128, 33, 0.55);
  }
}