.sub-hero {
background: linear-gradient(135deg, #0077A9, #00B4D8);
color: #fff;
text-align: center;
}
.sub-hero h1 {
font-size: 1.9em;
margin-bottom: 10px;
}
.sub-hero p {
font-size: 1.1em;
opacity: 0.95;
}
.usecase-detail {
padding: 20px 6%;
background: #fff;
text-align: center;
}
.usecase-detail h1 {
color: #0077A9;
font-size: 1.9em;
margin-bottom: 10px;
}
.usecase-detail .lead {
max-width: 850px;
margin: 0 auto 40px;
line-height: 1.9;
font-size: 1em;
color: #333;
text-align: left;
} .usecase-block {
margin-top: 70px;
text-align: left;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.usecase-block h2 {
color: #0077A9;
font-size: 1.5em;
border-left: 6px solid #FF9430;
padding-left: 12px;
margin-bottom: 16px;
}
.usecase-block p {
line-height: 1.9;
color: #333;
text-align: left;
font-size: 1em;
} .diagram-wrap {
display: flex;
justify-content: center; align-items: center; width: 100%;
text-align: center;
margin-bottom: 20px;
}
.diagram-wrap img {
width: 100%;
max-width: 800px;
border-radius: 10px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
} .back-link {
display: inline-block;
margin-top: 15px;
font-size: 0.95em;
color: #0077A9;
text-decoration: none;
}
.back-link:hover {
text-decoration: underline;
color: #00B4D8;
} .flow-icons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 1em;
margin: 20px 0 25px;
}
.flow-icons .flow-item {
background: #fff;
border: 1px solid #d0e6f0;
border-radius: 8px;
padding: 6px 12px;
font-size: 0.95em;
color: #0077A9;
font-weight: 500;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.flow-icons .arrow {
color: #ff9430;
font-size: 1.2em;
margin: 0 4px;
} @media (max-width: 768px) {
.flow-icons {
flex-direction: column;
gap: 6px;
}
.flow-icons .arrow {
transform: rotate(90deg);
margin: 0;
}
} @media (max-width: 768px) {
.usecase-detail { padding: 60px 5%; }
.usecase-block h2 { font-size: 1.25em; }
.usecase-detail .lead { text-align: left; font-size: 0.95em; }
.diagram-wrap img { max-width: 100%; }
}  .tool-integration-note {
background: #f8fbfd;
border: 1.5px solid #0077A9; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
padding: 20px 6%;
margin: 50px auto;
max-width: 900px;
text-align: center;
}
.tool-integration-note .tool-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 24px;
margin-bottom: 18px;
}
.tool-integration-note .icon-item {
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
cursor: default;
}
.tool-integration-note .icon-item:hover {
transform: translateY(-3px);
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.tool-integration-note .icon-item svg {
width: 32px;
height: 32px;
}
.tool-integration-note p {
font-size: 0.95em;
color: #333;
line-height: 1.8;
margin: 0 auto;
max-width: 700px;
}
.tool-integration-note strong {
color: var(--main-blue);
font-weight: 600;
} @media (max-width: 768px) {
.tool-integration-note.svg {
padding: 25px 4%;
}
.tool-integration-note .tool-icons {
gap: 16px;
flex-wrap: wrap;
}
.tool-integration-note .icon-item {
width: 44px;
height: 44px;
}
.tool-integration-note .icon-item svg {
width: 28px;
height: 28px;
}
.tool-integration-note p {
font-size: 0.9em;
}
} .ai-image-note {
background: #f8fbfd;
border: 1.5px solid #0077A9; border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 0px 6%;
margin: 60px auto;
max-width: 900px;
text-align: center;
}
.ai-image-note h3 {
color: var(--main-blue);
font-size: 1.4em;
margin-bottom: 14px;
}
.ai-image-note p {
font-size: 0.95em;
color: #333;
line-height: 1.8;
}
.ai-image-note strong {
color: var(--orange);
font-weight: 600;
} @media (max-width: 768px) {
.ai-image-note {
padding: 30px 4%;
margin: 40px 5%;
}
.ai-image-note h3 {
font-size: 1.2em;
}
.ai-image-note p {
font-size: 0.9em;
}
} .integration-summary {
background: #f7f9fb;
border: 1.5px solid #0077A9;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
padding: 60px 6%;
margin: 60px auto;
max-width: 950px;
text-align: center;
}
.integration-summary h2 {
color: #0077A9;
font-size: 1.6em;
margin-bottom: 20px;
}
.integration-summary .lead {
font-size: 1em;
color: #333;
line-height: 1.9;
max-width: 780px;
margin: 0 auto 40px;
text-align: left;
}
.integration-summary .diagram-center {
text-align: center;
margin: 40px 0;
}
.integration-summary .diagram-center img {
width: 100%;
max-width: 800px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
} .integration-summary .integration-points {
display: flex;
flex-direction: column;
gap: 8px;
text-align: left;
margin: 0 auto 30px;
padding-left: 0;
max-width: 750px;
list-style: none;
}
.integration-summary .integration-points li {
position: relative;
padding-left: 28px;
line-height: 1.8;
font-size: 0.98em;
color: #333;
}
.integration-summary .integration-points li::before {
content: "✔";
color: #FF9430;
font-weight: bold;
position: absolute;
left: 0;
top: 0;
} .integration-summary .small {
font-size: 0.88em;
color: #555;
line-height: 1.7;
margin-top: 20px;
} @media (max-width: 768px) {
.integration-summary {
padding: 40px 5%;
margin: 40px 5%;
}
.integration-summary h2 {
font-size: 1.3em;
margin-bottom: 14px;
}
.integration-summary .lead {
font-size: 0.95em;
margin-bottom: 30px;
}
.integration-summary .integration-points li {
font-size: 0.9em;
}
.integration-summary .diagram-center img {
max-width: 100%;
box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
}
.integration-summary .diagram-center {
display: flex;
justify-content: center; }
.integration-summary .diagram-center img {
object-fit: contain;
max-width: 800px;
width: 100%;
height: auto;
display: block;
margin: 0 auto;
} .usecase-links-split {
display: flex;
justify-content: space-between; align-items: center;
margin-top: 30px;
flex-wrap: wrap; gap: 10px; } .usecase-links-split .back-link {
color: #0077A9;
text-decoration: none;
font-size: 0.95em;
font-weight: 500;
}
.usecase-links-split .back-link:hover {
text-decoration: underline;
} .usecase-links-split .btn-primary {
background: #0077A9;
color: #fff;
font-weight: 600;
padding: 10px 22px;
border-radius: 6px;
text-decoration: none;
transition: 0.3s;
}
.usecase-links-split .btn-primary:hover {
background: #005f86;
} @media (max-width: 768px) {
.usecase-links-split {
flex-direction: column;
align-items: center;
}
}