@charset "UTF-8";
  :root {
--orange-gradient: linear-gradient(90deg, rgba(212,104,158,1) 0%, rgba(248,128,112,1) 100%);
--purple-gradient: linear-gradient(151deg, rgba(127,168,221,1) 0%, rgba(172,149,234,1) 50%, rgba(194,138,244,1) 100%);
--dark-gradient: linear-gradient(151deg, rgba(62,116,186,1) 0%, rgba(105,73,190,1) 50%, rgba(109,46,166,1) 100%);
--light-purple-gradient: linear-gradient(270deg, rgba(73,128,225,0.4) 0%, rgba(159,135,247,0.4) 100%);
--dark-bg: #313C49;
--navy-bg: #000049;
--white: #FFFFFF;
--black: #000000;
--dark-text: #272727;
--gray-text: #717171;
--medium-text: #333333;
--light-blue: #B9EDFE;
--font-noto: 'Noto Sans JP', sans-serif;
--font-inter: 'Inter', sans-serif;
--font-gothic: 'Gothic A1', sans-serif;
} *, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-noto);
color: var(--dark-text);
background: #f5f5f5;
overflow-x: hidden;
}
.page-wrapper {
max-width: 1512px;
margin: 0 auto;
background: var(--white);
overflow: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
text-decoration: none;
color: inherit;
} .header {
position: relative;
width: 1512px;
height: 96px;
background: var(--white);
}
.header-logo {
position: absolute;
left: 47px;
top: 50%;
transform: translateY(-50%);
width: 140px;
height: 40px;
}
.header-logo a {
display: block;
width: 100%;
height: 100%;
}
.header-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.header-cta {
position: fixed;
right: max(31px, calc((100vw - 1512px) / 2 + 31px));
top: 30px;
width: 192px;
height: 36px;
background: var(--orange-gradient);
border-radius: 6px;
box-shadow: 0px 2.4px 2.4px rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 3.4px;
cursor: pointer;
z-index: 50;
}
.header-cta span {
font-family: var(--font-inter);
font-weight: 800;
font-size: 13px;
line-height: 0.76em;
letter-spacing: 0.1111em;
color: var(--white);
text-align: center;
}
.header-cta .arrow {
font-size: 11px;
color: var(--white);
} .kv {
position: relative;
width: 1512px;
height: 567px;
background: var(--white);
overflow: hidden;
}
.kv-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 1512px;
height: 568px;
object-fit: cover;
pointer-events: none;
z-index: 0;
}
.kv-accent-bar-1 {
position: absolute;
left: 60px;
top: 111px;
width: 130px;
height: 14px;
background: var(--orange-gradient);
z-index: 1;
}
.kv-accent-bar-2 {
position: absolute;
left: 215px;
top: 111px;
width: 132px;
height: 14px;
background: var(--orange-gradient);
z-index: 1;
}
.kv-sub-heading {
position: absolute;
left: 14px;
top: 48px;
z-index: 1;
font-family: var(--font-noto);
font-weight: 900;
font-size: 60px;
background: var(--dark-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.kv-main-heading {
position: absolute;
left: 52px;
top: 141px;
font-family: var(--font-noto);
font-weight: 900;
font-size: 50px;
line-height: 1.556;
color: var(--black);
z-index: 1;
}
.kv-purple-bar {
position: absolute;
left: 59px;
top: 344px;
z-index: 1;
width: auto;
max-width: 720px;
height: 40px;
background: var(--dark-gradient);
box-shadow: 0px 4px 12px rgba(105, 73, 190, 0.25);
display: flex;
align-items: center;
padding-left: 12px;
padding-right: 16px;
}
.kv-tagline {
font-family: var(--font-noto);
font-weight: 900;
font-size: 22px;
color: var(--white);
letter-spacing: 0.05em;
}
.kv-description {
position: absolute;
left: 59px;
top: 396px;
font-family: var(--font-noto);
font-weight: 600;
font-size: 20px;
color: var(--black);
z-index: 1;
}
.kv-tags {
position: absolute;
left: 59px;
top: 460px;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: 720px;
}
.kv-tag {
font-family: var(--font-noto);
font-weight: 600;
font-size: 14px;
color: #6D2EA6;
background: rgba(255, 255, 255, 0.85);
padding: 5px 12px;
border-radius: 9999px;
border: 1px solid rgba(109, 46, 166, 0.25);
letter-spacing: 0.02em;
}
.kv-hero-image {
position: absolute;
left: 823px;
top: 50px;
z-index: 1;
width: 783px;
height: 439px;
border-radius: 34px;
object-fit: cover;
filter: drop-shadow(0px 12px 24px rgba(0,0,0,0.15));
background: #e8e8e8;
} .cta-section {
position: relative;
width: 1512px;
background: var(--dark-bg);
padding: 70px 364px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.cta-speech-bubble {
position: absolute;
top: -26px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: -14px;
z-index: 2;
}
.cta-speech-bubble-box {
background: var(--white);
border: 5px solid var(--dark-bg);
border-radius: 31.55px;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: center;
}
.cta-speech-bubble-box span {
font-family: var(--font-inter);
font-weight: 800;
font-size: 20px;
line-height: 1.21;
letter-spacing: 0.1em;
color: var(--medium-text);
white-space: nowrap;
}
.cta-speech-triangle {
width: 0;
height: 0;
border-left: 19px solid transparent;
border-right: 19px solid transparent;
border-top: 19px solid var(--white);
margin-top: -5px;
}
.cta-buttons {
display: flex;
flex-direction: row;
gap: 18px;
margin-top: 30px;
}
.cta-btn {
width: 400px;
height: 60px;
border-radius: 10px;
box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
display: flex;
align-items: center;
justify-content: center;
gap: 5.7px;
cursor: pointer;
border: none;
}
.cta-btn-orange {
background: var(--orange-gradient);
}
.cta-btn-purple {
background: var(--purple-gradient);
}
.cta-btn span {
font-family: var(--font-inter);
font-weight: 800;
font-size: 18px;
line-height: 0.76em;
letter-spacing: 0.1111em;
color: var(--white);
text-align: center;
}
.cta-btn .arrow {
font-size: 16px;
color: var(--white);
} .section-problem1 {
position: relative;
width: 1512px;
min-height: 846px;
background: #f5f5f8;
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 180px;
overflow: hidden;
}
.section-problem1-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.section-problem1 > *:not(.section-problem1-bg) {
position: relative;
z-index: 1;
}
.section-title-area {
position: relative;
text-align: center;
margin-bottom: 50px;
}
.watermark {
font-family: var(--font-gothic);
font-weight: 700;
font-size: 80px;
line-height: 1.25;
letter-spacing: 0.2em;
color: transparent;
-webkit-text-stroke: 1px;
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
.watermark-purple {
-webkit-text-stroke-color: rgba(120, 140, 230, 0.4);
}
.watermark-white {
-webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
}
.section-title-bar {
display: inline-block;
background: var(--navy-bg);
padding: 8px 30px;
position: relative;
z-index: 1;
}
.section-title-bar h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--white);
line-height: 1.362;
}
.problem1-title-multiline {
text-align: center;
}
.problem1-title-multiline .line {
display: block;
background: var(--navy-bg);
padding: 4px 20px;
margin: 4px auto;
width: fit-content;
}
.problem1-title-multiline .line span {
font-family: var(--font-noto);
font-weight: 700;
color: var(--white);
line-height: 1.5;
}
.problem1-title-multiline .line:first-child {
background: var(--navy-bg);
padding: 6px 20px;
border-radius: 4px;
}
.problem1-title-multiline .line:first-child span {
font-size: 20px;
color: var(--white);
}
.problem1-title-multiline .line:nth-child(2) {
background: none;
padding: 8px 0;
}
.problem1-title-multiline .line:nth-child(2) span {
font-size: 46px;
font-weight: 900;
color: var(--dark-text);
}
.problem1-title-multiline .line:last-child {
background: none;
padding: 0;
}
.problem1-title-multiline .line:last-child span {
font-size: 28px;
font-weight: 700;
background: var(--dark-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.problem1-cards {
display: grid;
grid-template-columns: 560px 560px;
gap: 32px;
width: 1152px;
}
.problem1-card {
width: 560px;
height: 192px;
background: var(--white);
border-radius: 8px;
box-shadow: 0px 10px 25px -5px rgba(0,0,0,0.08), 0px 4px 10px -4px rgba(0,0,0,0.04);
display: flex;
align-items: center;
padding: 32px;
gap: 24px;
}
.problem1-card-icon {
width: 80px;
height: 128px;
flex-shrink: 0;
object-fit: contain;
}
.problem1-card-text {
font-family: var(--font-noto);
font-weight: 600;
font-size: 18px;
line-height: 1.7;
color: var(--dark-text);
margin-left :30px;
} .section-problem2 {
position: relative;
width: 1512px;
min-height: 1140px;
display: flex;
flex-direction: row;
overflow: hidden;
}
.section-problem2-bg-left {
position: absolute;
top: 0;
left: 0;
width: 756px;
height: 100%;
background: #5A6878;
}
.section-problem2-bg-right {
position: absolute;
top: 0;
left: 756px;
width: 756px;
height: 100%;
background: var(--navy-bg);
}
.section-problem2-content {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0;
}
.section-problem2-title {
position: relative;
text-align: center;
margin-bottom: 80px;
}
.section-problem2-title h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--white);
line-height: 1.362;
position: relative;
z-index: 1;
}
.section-problem2-columns {
display: flex;
flex-direction: row;
gap: 80px;
}
.problem2-column {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.problem2-column-title {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--white);
line-height: 1.362;
margin-bottom: 10px;
}
.problem2-box {
width: 667px;
background: var(--white);
border-radius: 4.1px;
box-shadow: 0px 3.28px 3.28px rgba(0,0,0,0.25);
padding: 16.4px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16.4px;
}
.problem2-box-image {
width: 200px;
height: 200px;
flex-shrink: 0;
object-fit: cover;
border-radius: 4px;
margin-left: 42px;
}
.problem2-box-content {
flex: 1;
}
.problem2-box-label {
display: inline-block;
background: var(--dark-bg);
color: var(--white);
font-family: var(--font-noto);
font-weight: 700;
font-size: 18px;
line-height: 1.362;
padding: 5px 10px;
border-radius: 5px;
margin-bottom: 10px;
margin-left: 40px;
}
.problem2-box-text {
font-family: var(--font-noto);
font-weight: 600;
font-size: 14px;
line-height: 1.362;
color: var(--gray-text);
white-space: pre-line;
margin-left: 40px;
} .section-reason {
width: 1512px;
background: var(--white);
padding: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.section-reason-title {
position: relative;
text-align: center;
margin-bottom: 60px;
}
.section-reason-title h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--dark-text);
line-height: 1.362;
position: relative;
z-index: 1;
}
.reason-cards {
display: flex;
flex-direction: column;
gap: 50px;
align-items: center;
}
.reason-card {
width: 1046px;
background: var(--white);
border: none;
border-radius: 16px;
padding: 43px;
display: flex;
flex-direction: row;
gap: 40px;
align-items: center;
box-shadow: 0px 10px 25px -5px rgba(0,0,0,0.08), 0px 4px 10px -4px rgba(0,0,0,0.04);
}
.reason-card.reverse {
flex-direction: row-reverse;
}
.reason-card-content {
flex: 1;
}
.reason-card-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.reason-card-label-text {
font-family: var(--font-inter);
font-weight: 800;
font-size: 14px;
color: var(--gray-text);
letter-spacing: 0.1em;
}
.reason-card-number {
font-family: var(--font-inter);
font-weight: 800;
font-size: 40px;
background: var(--dark-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.reason-card-line {
flex: 1;
height: 1px;
background: #ccc;
}
.reason-card-heading {
font-family: var(--font-noto);
font-weight: 700;
color: var(--dark-text);
margin-bottom: 16px;
line-height: 1.4;
}
.reason-card-heading .line1 {
display: block;
font-size: 22px;
font-weight: 700;
}
.reason-card-heading .line2 {
display: inline;
font-size: 36px;
font-weight: 900;
background: linear-gradient(transparent 70%, #d0d0d0 70%) no-repeat;
background-size: 100% 100%;
}
.reason-card-desc {
font-family: var(--font-noto);
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: var(--gray-text);
margin-bottom: 20px;
}
.reason-card-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.reason-card-tag {
background: var(--dark-bg);
color: var(--white);
font-family: var(--font-noto);
font-weight: 700;
font-size: 12px;
padding: 5px 10px;
border-radius: 5px;
}
.reason-card-image {
width: 301px;
height: 234px;
flex-shrink: 0;
object-fit: contain;
background: #f0f0f0;
border-radius: 8px;
} .section-rfp {
width: 1512px;
background: var(--white);
padding: 80px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.section-rfp-title {
position: relative;
text-align: center;
margin-bottom: 40px;
}
.section-rfp-title h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--dark-text);
line-height: 1.362;
position: relative;
z-index: 1;
}
.rfp-intro {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 40px;
margin-bottom: 50px;
width: 952px;
background: var(--white);
border-radius: 12px;
box-shadow: 0px 4px 16px rgba(0,0,0,0.06);
padding: 40px 30px;
}
.rfp-intro-text {
font-family: var(--font-noto);
font-weight: 700;
font-size: 20px;
line-height: 1.9;
color: var(--dark-text);
text-align: center;
flex: 1;
}
.rfp-intro-text .highlight {
background: linear-gradient(transparent 60%, rgba(127,168,221,0.3) 60%, rgba(194,138,244,0.3) 60%);
}
.rfp-intro-text .bottom-text {
display: block;
margin-top: 24px;
font-size: 22px;
font-weight: 900;
}
.rfp-intro-text .accent-underline {
background: linear-gradient(transparent 65%, rgba(127,168,221,0.4) 65%, rgba(194,138,244,0.4) 65%);
}
.rfp-intro-image {
width: 164px;
height: 200px;
object-fit: contain;
flex-shrink: 0;
}
.rfp-points-grid {
display: grid;
grid-template-columns: 526px 526px;
gap: 30px;
}
.rfp-point-card {
width: 526px;
height: 300px;
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}
.rfp-point-card-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--dark-bg);
}
.rfp-point-label {
position: absolute;
top: 18.59px;
left: 19.59px;
font-family: var(--font-gothic);
font-weight: 700;
font-size: 10px;
color: var(--white);
letter-spacing: 1.32px;
}
.rfp-point-number {
position: absolute;
top: 32.15px;
left: 21.1px;
font-family: var(--font-gothic);
font-weight: 900;
font-size: 25px;
color: var(--white);
letter-spacing: 3.22px;
line-height: 1;
}
.rfp-point-subtitle {
position: absolute;
top: 26px;
left: 57.27px;
margin-left: 15px;
font-family: var(--font-noto);
font-weight: 700;
font-size: 20px;
color: var(--white);
line-height: 1;
}
.rfp-point-inner-box {
position: absolute;
top: 77.37px;
left: 50%;
transform: translateX(-50%);
width: 450px;
height: 200px;
background: var(--white);
border-radius: 10.05px;
padding: 12px 14px;
overflow: hidden;
}
.rfp-point-inner-label {
font-family: var(--font-noto);
font-weight: 700;
font-size: 8.24px;
color: var(--white);
background: var(--dark-bg);
padding: 2.51px 5.02px;
border-radius: 2.51px;
display: inline-block;
margin-bottom: 6px;
}
.rfp-point-inner-text {
font-family: var(--font-noto);
font-weight: 400;
font-size: 13px;
color: var(--gray-text);
line-height: 1.2;
white-space: pre-line;
}
.rfp-point-inner-text .marker {
background: linear-gradient(transparent 60%, rgba(127,168,221,0.4) 60%, rgba(194,138,244,0.4) 60%);
font-weight: 700;
font-size: 14px;
}
.rfp-point-triangle {
display: none;
} .section-flow {
width: 1512px;
background: var(--white);
padding: 80px 0 100px;
display: flex;
flex-direction: column;
align-items: center;
}
.section-flow-title {
position: relative;
text-align: center;
margin-bottom: 60px;
}
.section-flow-title h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--dark-text);
line-height: 1.362;
position: relative;
z-index: 1;
}
.flow-steps {
display: flex;
flex-direction: column;
gap: 18px;
}
.flow-step {
width: 922px;
height: 90px;
background: var(--white);
border-radius: 8px;
box-shadow: 0px 2px 8px rgba(0,0,0,0.08);
display: flex;
align-items: center;
padding: 0 30px;
gap: 24px;
}
.flow-step-number {
width: 50px;
height: 50px;
background: var(--purple-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-inter);
font-weight: 800;
font-size: 20px;
color: var(--white);
flex-shrink: 0;
}
.flow-step-content {
flex: 1;
}
.flow-step-title {
font-family: var(--font-noto);
font-weight: 700;
font-size: 20px;
color: var(--dark-text);
margin-bottom: 4px;
}
.flow-step-desc {
font-family: var(--font-noto);
font-weight: 400;
font-size: 16px;
color: var(--gray-text);
line-height: 1.5;
} .sec-achievements {
width: 1512px;
padding: 80px 0;
background-image: url(//replelu.jp/wp-content/themes/replelu_v2/assets/img/achieve_bg.png);
background-image: image-set(
url(//replelu.jp/wp-content/themes/replelu_v2/assets/img/achieve_bg.webp) type('image/webp'),
url(//replelu.jp/wp-content/themes/replelu_v2/assets/img/achieve_bg.png) type('image/png')
);
background-size: cover;
background-position: center;
position: relative;
}
.sec-achievements::before {
content: '';
position: absolute;
inset: 0;
background: rgba(39, 39, 39, 0.85);
z-index: 0;
}
.sec-achievements .container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.sec-achievements .sec-title-block {
margin-bottom: 40px;
text-align: center;
}
.sec-achievements .sec-title-en {
font-size: 80px;
font-weight: 700;
line-height: 1;
color: rgba(255, 255, 255, 0.15);
}
.sec-achievements .sec-title-jp {
font-size: 30px;
font-weight: 700;
line-height: 1.4;
color: #fff;
}
.sec-achievements .achieve-stats {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 48px;
}
.sec-achievements .achieve-stats img {
width: calc(25% - 18px);
max-width: 220px;
}
.sec-achievements .achieve-industries-title {
font-size: 18px;
font-weight: 700;
color: #fff;
text-align: center;
margin-bottom: 24px;
}
.sec-achievements .achieve-industries {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.sec-achievements .achieve-industry-tag {
background: rgba(255, 255, 255, 0.15);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 6px 20px;
font-size: 14px;
} .section-cases {
width: 1512px;
background: var(--white);
padding: 80px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.section-cases-title {
position: relative;
text-align: center;
margin-bottom: 60px;
}
.section-cases-title h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--dark-text);
line-height: 1.362;
position: relative;
z-index: 1;
}
.cases-grid {
display: grid;
grid-template-columns: repeat(3, 384px);
gap: 32px;
justify-content: center;
}
.case-card {
background: rgba(255,255,255,0.9);
border: 1px solid rgba(229,231,235,0.6);
border-radius: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.case-card-logo-area {
height: 240px;
background: linear-gradient(147.86deg, rgb(239,246,255) 0%, rgb(238,242,255) 50%, rgb(239,246,255) 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.case-card-logo {
max-width: 345px;
max-height: 140px;
object-fit: contain;
}
.case-card-body {
background: var(--white);
padding: 32px;
flex: 1;
display: flex;
flex-direction: column;
gap: 28px;
}
.case-card-company {
font-family: var(--font-noto);
font-weight: 700;
font-size: 18px;
color: #101828;
letter-spacing: -0.89px;
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 16px;
border-bottom: 1px solid #f3f4f6;
}
.case-card-company-icon {
width: 40px;
height: 40px;
background: #eff6ff url(//replelu.jp/wp-content/themes/replelu_v2/assets/img/Icon_company.png) center / 20px 20px no-repeat;
border-radius: 14px;
flex-shrink: 0;
}
.case-card-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.case-card-section-header {
display: flex;
align-items: center;
gap: 12px;
}
.case-card-section-dot {
width: 6px;
height: 6px;
background: #2b7fff;
border-radius: 50%;
flex-shrink: 0;
}
.case-card-section-title {
font-family: var(--font-noto);
font-weight: 700;
font-size: 17px;
color: #155dfc;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.case-card-section-text {
font-family: var(--font-noto);
font-weight: 400;
font-size: 14px;
color: #364153;
line-height: 22.75px;
letter-spacing: -0.15px;
padding-left: 20px;
}
.case-card-gradient-bar {
height: 4px;
background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.02) 100%);
margin-top: auto;
} .section-usecase {
width: 1512px;
background: var(--white);
padding: 80px 89.5px;
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
}
.section-usecase-title {
position: relative;
text-align: center;
}
.section-usecase-title h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
background: linear-gradient(90deg, #101828 0%, #1c398e 50%, #101828 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 1;
}
.usecase-carousel {
width: 1280px;
position: relative;
}
.usecase-slides {
display: flex;
gap: 32px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-ms-overflow-style: none;
scrollbar-width: none;
}
.usecase-slides::-webkit-scrollbar {
display: none;
}
.usecase-slides > .usecase-card {
scroll-snap-align: start;
flex-shrink: 0;
}
.usecase-card {
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: 24px;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
overflow: hidden;
width: 1248px;
margin: 0 auto;
}
.usecase-card-header {
background: linear-gradient(151deg, #3E74BA 0%, #6949BE 50%, #6D2EA6 100%);
padding: 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.usecase-card-header-top {
display: flex;
align-items: center;
gap: 16px;
}
.usecase-card-type {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--white);
letter-spacing: 0.4px;
}
.usecase-card-badge {
background: rgba(255,255,255,0.2);
border: 1px solid rgba(255,255,255,0.3);
padding: 8px 20px;
border-radius: 9999px;
font-family: var(--font-noto);
font-weight: 600;
font-size: 14px;
color: var(--white);
}
.usecase-card-requirement {
font-family: var(--font-noto);
font-weight: 400;
font-size: 18px;
color: rgba(255,255,255,0.95);
letter-spacing: -0.44px;
}
.usecase-card-body {
background: #f9fafb;
padding: 48px;
display: flex;
flex-direction: column;
gap: 40px;
}
.usecase-ba-headers {
display: flex;
align-items: center;
gap: 24px;
}
.usecase-ba-header-item {
flex: 1;
background: var(--white);
border: 2px solid #d1d5dc;
border-radius: 14px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
height: 84px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.usecase-ba-header-item.is-after {
background-image: linear-gradient(white, white),
linear-gradient(151deg, #3E74BA 0%, #6949BE 50%, #6D2EA6 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
border: 2px solid transparent;
box-shadow: 0px 8px 20px rgba(105, 73, 190, 0.15);
}
.usecase-ba-header-item span {
font-family: var(--font-inter);
font-weight: 700;
font-size: 30px;
color: #364153;
}
.usecase-ba-arrow-icon {
width: 32px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
font-size: 20px;
}
.usecase-rows {
display: flex;
flex-direction: column;
gap: 24px;
}
.usecase-row {
display: grid;
grid-template-columns: 529px 44px 1fr;
gap: 24px;
align-items: stretch;
}
.usecase-before-card {
background: var(--white);
border: 1px solid #e5e7eb;
border-radius: 14px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
padding: 29px;
display: flex;
flex-direction: column;
gap: 16px;
}
.usecase-before-card h4 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 16px;
color: #272727;
letter-spacing: -0.31px;
line-height: 24px;
}
.usecase-before-card p {
font-family: var(--font-noto);
font-weight: 400;
font-size: 14px;
color: #4a5565;
line-height: 22.75px;
}
.usecase-row-arrow {
display: flex;
align-items: center;
justify-content: center;
}
.usecase-row-arrow-circle {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(151deg, #3E74BA 0%, #6949BE 50%, #6D2EA6 100%);
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 18px;
}
.usecase-after-card {
position: relative;
background-image: linear-gradient(white, white),
linear-gradient(151deg, #3E74BA 0%, #6949BE 50%, #6D2EA6 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
border: 2px solid transparent;
border-radius: 14px;
box-shadow: 0px 8px 20px rgba(105, 73, 190, 0.15);
padding: 36px 29px 29px;
display: flex;
flex-direction: column;
gap: 16px;
}
.usecase-after-card::before {
content: 'AFTER';
position: absolute;
top: -12px;
left: 20px;
background: linear-gradient(151deg, #3E74BA 0%, #6949BE 50%, #6D2EA6 100%);
color: #fff;
font-family: var(--font-inter);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
padding: 4px 12px;
border-radius: 4px;
box-shadow: 0px 2px 6px rgba(105, 73, 190, 0.25);
}
.usecase-after-card h4 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 16px;
color: #272727;
letter-spacing: -0.31px;
line-height: 24px;
}
.usecase-after-card p {
font-family: var(--font-noto);
font-weight: 400;
font-size: 14px;
color: #4a5565;
line-height: 22.75px;
}
.usecase-side-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 64px;
height: 64px;
border: 1px solid #d1d5dc;
border-radius: 50%;
background: var(--white);
box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 22px;
color: #364153;
z-index: 2;
}
.usecase-side-btn.prev {
left: -24px;
}
.usecase-side-btn.next {
right: -24px;
} .section-service {
width: 1512px;
background: var(--white);
padding: 80px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.section-service-title {
position: relative;
text-align: center;
margin-bottom: 60px;
}
.section-service-title h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--dark-text);
line-height: 1.362;
position: relative;
z-index: 1;
}
.service-main-card {
width: 1280px;
background: var(--white);
border-radius: 12px;
box-shadow: 0px 4px 16px rgba(0,0,0,0.08);
display: flex;
flex-direction: row;
overflow: hidden;
margin-bottom: 40px;
}
.service-main-content {
flex: 1;
padding: 48px;
display: flex;
flex-direction: column;
justify-content: center;
}
.service-main-heading {
font-family: var(--font-noto);
font-weight: 700;
font-size: 28px;
color: var(--dark-text);
margin-bottom: 24px;
line-height: 1.5;
}
.service-main-desc {
font-family: var(--font-noto);
font-weight: 400;
font-size: 14px;
color: var(--gray-text);
line-height: 1.8;
margin-bottom: 24px;
}
.service-checklist {
list-style: none;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 17px;
margin-bottom: 16px;
}
.service-checklist li {
font-family: var(--font-noto);
font-weight: 500;
font-size: 14px;
color: var(--dark-text);
line-height: 2;
padding-left: 28px;
position: relative;
}
.service-checklist li::before {
content: "\2713";
position: absolute;
left: 0;
top: 2px;
width: 20px;
height: 20px;
background: linear-gradient(135deg, #2b7fff 0%, #ad46ff 100%);
border-radius: 50%;
box-shadow: 0px 4px 6px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.1);
color: #fff;
font-weight: 700;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
line-height: 20px;
text-align: center;
}
.service-main-image {
width: 638px;
height: 547px;
object-fit: cover;
background: #f0f0f0;
flex-shrink: 0;
}
.service-cards-row {
display: flex;
flex-wrap: wrap;
gap: 32px;
justify-content: center;
max-width: 1310px;
}
.service-card {
width: 405px;
background: var(--white);
border: 1px solid #f3f4f6;
border-radius: 16px;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
overflow: hidden;
display: flex;
flex-direction: column;
}
.service-card-image {
width: 100%;
height: 192px;
object-fit: cover;
}
.service-card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
background: var(--white);
}
.service-card-heading {
font-family: var(--font-noto);
font-weight: 700;
font-size: 20px;
background: linear-gradient(90deg, #155dfc 0%, #9810fa 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 12px;
letter-spacing: -0.45px;
line-height: 1.4;
}
.service-card-desc {
font-family: var(--font-noto);
font-weight: 400;
font-size: 14px;
color: #364153;
line-height: 22.75px;
letter-spacing: -0.15px;
margin-bottom: 16px;
}
.service-card-summary {
font-family: var(--font-noto);
font-weight: 400;
font-size: 14px;
color: #364153;
line-height: 22.75px;
letter-spacing: -0.15px;
padding-top: 12px;
border-top: 1px solid #eee;
} .section-faq {
width: 1512px;
background: #f9f9fb;
padding: 80px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.section-faq-title {
text-align: center;
margin-bottom: 50px;
}
.section-faq-title-small {
font-family: var(--font-inter);
font-weight: 800;
font-size: 14px;
color: var(--gray-text);
letter-spacing: 0.2em;
margin-bottom: 8px;
}
.section-faq-title h2 {
font-family: var(--font-noto);
font-weight: 700;
font-size: 30px;
color: var(--dark-text);
line-height: 1.362;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 900px;
width: 100%;
}
.faq-item {
background: var(--white);
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 24px 30px;
}
.faq-question {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.faq-q-label {
font-family: var(--font-noto);
font-weight: 700;
font-size: 20px;
color: #7fa8dd;
flex-shrink: 0;
}
.faq-q-text {
font-family: var(--font-noto);
font-weight: 700;
font-size: 16px;
color: var(--dark-text);
line-height: 1.6;
}
.faq-answer {
display: flex;
align-items: flex-start;
gap: 12px;
}
.faq-a-label {
font-family: var(--font-noto);
font-weight: 700;
font-size: 20px;
color: #c28af4;
flex-shrink: 0;
}
.faq-a-text {
font-family: var(--font-noto);
font-weight: 400;
font-size: 15px;
color: var(--gray-text);
line-height: 1.8;
} .section-contact {
width: 1512px;
background: var(--white);
padding: 80px 116px;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.contact-left {
flex: 0 0 auto;
width: 100%;
max-width: 720px;
}
.contact-label-small {
font-family: var(--font-inter);
font-weight: 800;
font-size: 14px;
color: var(--gray-text);
letter-spacing: 0.2em;
margin-bottom: 8px;
}
.contact-title {
font-family: var(--font-noto);
font-weight: 700;
font-size: 36px;
color: var(--dark-text);
margin-bottom: 24px;
}
.contact-desc {
font-family: var(--font-noto);
font-weight: 400;
font-size: 14px;
color: var(--gray-text);
line-height: 1.8;
}
.contact-right {
flex: 0 0 auto;
width: 100%;
max-width: 720px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-family: var(--font-noto);
font-weight: 600;
font-size: 14px;
color: var(--dark-text);
}
.form-group label .required {
color: #e74c3c;
font-size: 12px;
margin-left: 4px;
}
.form-group input,
.form-group textarea {
border: 1px solid #ccc;
border-radius: 6px;
padding: 12px 16px;
font-family: var(--font-noto);
font-size: 14px;
color: var(--dark-text);
outline: none;
transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #7fa8dd;
}
.form-group textarea {
height: 120px;
resize: vertical;
}
.form-radio-group {
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
padding-top: 4px;
}
.form-radio {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-noto);
font-size: 14px;
color: var(--dark-text);
cursor: pointer;
} .form-radio input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
accent-color: #7fa8dd;
cursor: pointer;
flex-shrink: 0;
}
.form-submit {
width: 160px;
height: 48px;
background: #ff8904;
border: none;
border-radius: 9999px;
font-family: var(--font-noto);
font-weight: 500;
font-size: 16px;
color: var(--white);
cursor: pointer;
align-self: center;
letter-spacing: -0.31px;
} .footer {
width: 1512px;
height: auto;
background: #2D2D2D;
padding: 48px 80px;
display: flex;
flex-direction: column;
gap: 32px;
}
.footer-top {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.footer-logo {
font-family: var(--font-noto);
font-weight: 900;
font-size: 28px;
color: var(--white);
}
.footer-right {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.footer-right-title {
font-family: var(--font-noto);
font-weight: 700;
font-size: 14px;
color: var(--white);
margin-bottom: 12px;
}
.footer-right-link {
font-family: var(--font-noto);
font-weight: 400;
font-size: 14px;
color: rgba(255,255,255,0.7);
}
.footer-bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(255,255,255,0.15);
padding-top: 20px;
}
.footer-copyright {
font-family: var(--font-inter);
font-weight: 400;
font-size: 12px;
color: rgba(255,255,255,0.4);
}   @media screen and (max-width: 960px) {
.header {
width: 100%;
height: 72px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-logo {
display: block;
position: static;
left: auto;
top: auto;
transform: none;
flex-shrink: 0;
width: 110px;
height: 36px;
}
.header-cta {
position: static;
flex-shrink: 0;
}
} @media screen and (max-width: 640px) {
.header {
height: 60px;
padding: 0 16px;
}
.header-logo {
width: 100px;
height: 32px;
} .header-cta {
position: static;
flex-shrink: 0;
width: auto;
height: 34px;
padding: 0 14px;
}
.header-cta span {
font-size: 12px;
}
}  @media screen and (max-width: 960px) {
.kv {
width: 100%;
height: auto;
padding: 40px 20px 60px;
position: relative;
overflow: hidden;
} .kv-hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: none;
margin: 0;
border-radius: 0;
z-index: 0;
filter: blur(3px);
opacity: 0.55;
object-fit: cover;
} .kv::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.55);
z-index: 0;
pointer-events: none;
}
.kv-bg-pattern {
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.kv-accent-bar-1 {
left: 60px;
top: 85px;
width: 80px;
height: 12px;
z-index: 1;
}
.kv-accent-bar-2 {
left: 170px;
top: 85px;
width: 93px;
height: 12px;
z-index: 1;
}
.kv-sub-heading {
position: relative;
left: auto;
top: auto;
font-size: 44px;
margin-bottom: 8px;
margin-top: 0;
z-index: 2;
}
.kv-main-heading {
position: relative;
left: auto;
top: auto;
font-size: 36px;
line-height: 1.5;
margin-bottom: 28px;
z-index: 2;
}
.kv-purple-bar {
position: relative;
left: auto;
top: auto;
max-width: 100%;
margin-bottom: 20px;
z-index: 2;
}
.kv-tagline {
font-size: 18px;
}
.kv-description {
position: relative;
left: auto;
top: auto;
font-size: 16px;
margin-bottom: 16px;
z-index: 2;
}
.kv-tags {
position: relative;
left: auto;
top: auto;
max-width: 100%;
margin-bottom: 0;
z-index: 2;
}
} @media screen and (max-width: 640px) {
.kv {
padding: 30px 16px 40px;
}
.kv-accent-bar-1 {
left: 43px;
top: 60px;
width: 55px;
height: 10px;
}
.kv-accent-bar-2 {
left: 118px;
top: 60px;
width: 64px;
height: 10px;
}
.kv-sub-heading {
font-size: 30px;
}
.kv-main-heading {
font-size: 26px;
line-height: 1.45;
margin-bottom: 20px;
}
.kv-purple-bar {
height: auto;
padding: 8px 12px;
margin-bottom: 16px;
}
.kv-tagline {
font-size: 15px;
line-height: 1.4;
}
.kv-description {
font-size: 14px;
line-height: 1.5;
margin-bottom: 14px;
}
.kv-tag {
font-size: 12px;
padding: 4px 10px;
}
.kv-tags {
gap: 6px;
margin-bottom: 24px;
}
}  @media screen and (max-width: 960px) {
.cta-section {
width: 100%;
padding: 60px 40px;
}
.cta-buttons {
width: 100%;
justify-content: center;
gap: 14px;
margin-top: 24px;
}
.cta-btn {
width: auto;
flex: 1 1 0;
min-width: 0;
max-width: 400px;
height: 56px;
}
.cta-btn span {
font-size: 14px;
}
.cta-btn .arrow {
font-size: 14px;
}
} @media screen and (max-width: 640px) {
.cta-section {
padding: 48px 20px;
}
.cta-speech-bubble-box {
padding: 10px 16px;
}
.cta-speech-bubble-box span {
font-size: 13px;
}
.cta-speech-triangle {
border-left-width: 14px;
border-right-width: 14px;
border-top-width: 14px;
} .cta-buttons {
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 20px;
}
.cta-btn {
width: 100%;
max-width: 400px;
flex: none;
height: 56px;
}
.cta-btn span {
font-size: 15px;
}
.cta-btn .arrow {
font-size: 15px;
}
}  @media screen and (max-width: 960px) {
.section-problem1 {
width: 100%;
min-height: auto;
padding: 70px 40px;
}
.section-problem1 .section-title-area {
margin-bottom: 36px;
}
.section-problem1 .watermark {
font-size: 56px;
top: -36px;
}
.problem1-title-multiline .line:first-child span {
font-size: 16px;
}
.problem1-title-multiline .line:nth-child(2) span {
font-size: 32px;
}
.problem1-title-multiline .line:last-child span {
font-size: 20px;
} .problem1-cards {
grid-template-columns: 1fr;
width: 100%;
max-width: 600px;
gap: 20px;
}
.problem1-card {
width: auto;
height: auto;
min-height: 160px;
padding: 28px;
padding-left: 120px;
justify-content: flex-start;
}
.problem1-card-text {
font-size: 16px;
margin-left: 16px;
}
} @media screen and (max-width: 640px) {
.section-problem1 {
padding: 50px 20px;
}
.section-problem1 .section-title-area {
margin-bottom: 28px;
}
.section-problem1 .watermark {
font-size: 40px;
top: -26px;
} .problem1-title-multiline .line {
max-width: 100%;
}
.problem1-title-multiline .line:first-child span {
font-size: 14px;
}
.problem1-title-multiline .line:nth-child(2) span {
font-size: 21px;
}
.problem1-title-multiline .line:last-child span {
font-size: 17px;
}
.problem1-cards {
gap: 16px;
}
.problem1-card {
min-height: 140px;
padding: 20px;
padding-left: 80px;
gap: 16px;
}
.problem1-card-icon {
width: 64px;
height: 102px;
}
.problem1-card-text {
font-size: 14px;
margin-left: 8px;
}
}  @media screen and (max-width: 960px) {
.section-problem2 {
width: 100%;
min-height: auto;
background: #5A6878;
} .section-problem2-bg-left,
.section-problem2-bg-right {
display: none;
}
.section-problem2-content {
padding: 70px 0 0;
}
.section-problem2-title {
margin-bottom: 40px;
padding: 0 24px;
}
.section-problem2-title h2 {
font-size: 26px;
}
.section-problem2 .watermark {
font-size: 56px;
top: -36px;
} .section-problem2-columns {
flex-direction: column;
gap: 0;
width: 100%;
}
.problem2-column {
width: 100%;
padding: 0 24px 60px;
box-sizing: border-box;
} .problem2-column:last-child {
background: var(--navy-bg);
padding-top: 60px;
}
.problem2-column-title {
font-size: 24px;
}
.problem2-box {
width: 100%;
max-width: 667px;
box-sizing: border-box;
gap: 20px;
}
.problem2-box-image {
width: 160px;
height: 160px;
margin-left: 0;
}
.problem2-box-label {
margin-left: 0;
}
.problem2-box-text {
margin-left: 0;
}
} @media screen and (max-width: 640px) {
.section-problem2-content {
padding: 50px 0 0;
}
.section-problem2-title {
margin-bottom: 32px;
padding: 0 20px;
}
.section-problem2-title h2 {
font-size: 21px;
}
.section-problem2 .watermark {
font-size: 40px;
top: -26px;
}
.problem2-column {
padding: 0 20px 50px;
}
.problem2-column:last-child {
padding-top: 50px;
}
.problem2-column-title {
font-size: 20px;
} .problem2-box {
gap: 12px;
padding: 16px;
}
.problem2-box-image {
width: 120px;
height: 120px;
}
.problem2-box-text {
font-size: 13px;
}
}  @media screen and (max-width: 960px) {
.section-reason {
width: 100%;
padding: 70px 40px;
box-sizing: border-box;
}
.section-reason-title {
margin-bottom: 40px;
}
.section-reason-title h2 {
font-size: 26px;
}
.section-reason .watermark {
font-size: 56px;
top: -36px;
}
.reason-cards {
width: 100%;
gap: 36px;
}
.reason-card {
width: 100%;
max-width: 1046px;
box-sizing: border-box;
padding: 32px;
gap: 28px;
}
.reason-card-number {
font-size: 32px;
}
.reason-card-heading .line1 {
font-size: 19px;
}
.reason-card-heading .line2 {
font-size: 28px;
}
.reason-card-image {
width: 240px;
height: 187px;
}
} @media screen and (max-width: 640px) {
.section-reason {
padding: 50px 20px;
}
.section-reason-title {
margin-bottom: 28px;
}
.section-reason-title h2 {
font-size: 21px;
}
.section-reason .watermark {
font-size: 40px;
top: -26px;
}
.reason-cards {
gap: 24px;
}
.reason-card,
.reason-card.reverse {
padding: 24px;
} .reason-card-image {
display: none;
}
.reason-card-number {
font-size: 28px;
}
.reason-card-label-text {
font-size: 13px;
}
.reason-card-heading .line1 {
font-size: 17px;
}
.reason-card-heading .line2 {
font-size: 25px;
}
.reason-card-desc {
font-size: 14px;
}
}  @media screen and (max-width: 960px) {
.section-rfp {
width: 100%;
padding: 70px 40px;
box-sizing: border-box;
}
.section-rfp-title {
margin-bottom: 32px;
}
.section-rfp-title h2 {
font-size: 26px;
}
.section-rfp .watermark {
font-size: 56px;
top: -36px;
} .rfp-intro {
width: 100%;
max-width: 952px;
box-sizing: border-box;
gap: 24px;
padding: 28px 20px;
margin-bottom: 36px;
}
.rfp-intro-image {
width: 120px;
height: auto;
}
.rfp-intro-text {
font-size: 17px;
}
.rfp-intro-text .bottom-text {
font-size: 19px;
} .rfp-points-grid {
grid-template-columns: 1fr;
gap: 24px;
}
} @media screen and (max-width: 640px) {
.section-rfp {
padding: 50px 20px;
}
.section-rfp-title {
margin-bottom: 24px;
}
.section-rfp-title h2 {
font-size: 21px;
}
.section-rfp .watermark {
font-size: 40px;
top: -26px;
}
.rfp-intro {
padding: 24px 20px;
margin-bottom: 28px;
} .rfp-intro-image {
display: none;
}
.rfp-intro-text {
font-size: 15px;
}
.rfp-intro-text .bottom-text {
font-size: 17px;
margin-top: 18px;
} .rfp-points-grid {
width: 100%;
max-width: 526px;
}
.rfp-point-card {
width: 100%;
height: auto;
}
.rfp-point-header {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
padding: 16px 18px 0;
}
.rfp-point-label {
position: static;
top: auto;
left: auto;
}
.rfp-point-number {
position: static;
top: auto;
left: auto;
margin: 2px 0 4px;
}
.rfp-point-subtitle {
position: static;
top: auto;
left: auto;
margin-left: 0;
font-size: 17px;
}
.rfp-point-inner-box {
position: relative;
top: auto;
left: auto;
transform: none;
width: auto;
height: auto;
margin: 12px 14px 14px;
padding: 16px;
overflow: visible;
}
.rfp-point-inner-text {
line-height: 1.7;
}
}  @media screen and (max-width: 960px) {
.section-flow {
width: 100%;
padding: 70px 40px 80px;
box-sizing: border-box;
}
.section-flow-title {
margin-bottom: 40px;
}
.section-flow-title h2 {
font-size: 26px;
}
.section-flow .watermark {
font-size: 56px;
top: -36px;
}
.flow-steps {
width: 100%;
} .flow-step {
width: 100%;
max-width: 922px;
height: auto;
min-height: 90px;
box-sizing: border-box;
padding: 18px 24px;
}
} @media screen and (max-width: 640px) {
.section-flow {
padding: 50px 20px 60px;
}
.section-flow-title {
margin-bottom: 28px;
}
.section-flow-title h2 {
font-size: 21px;
}
.section-flow .watermark {
font-size: 40px;
top: -26px;
}
.flow-steps {
gap: 14px;
}
.flow-step {
padding: 16px 18px;
gap: 16px;
}
.flow-step-number {
width: 40px;
height: 40px;
font-size: 17px;
}
.flow-step-title {
font-size: 17px;
}
.flow-step-desc {
font-size: 14px;
}
}  @media screen and (max-width: 960px) {
.sec-achievements {
width: 100%;
box-sizing: border-box;
}
.sec-achievements .sec-title-en {
font-size: 56px;
}
.sec-achievements .sec-title-jp {
font-size: 26px;
} .sec-achievements .achieve-stats img {
width: calc(50% - 12px);
}
} @media screen and (max-width: 640px) {
.sec-achievements {
padding: 50px 0;
}
.sec-achievements .sec-title-block {
margin-bottom: 28px;
}
.sec-achievements .sec-title-en {
font-size: 40px;
}
.sec-achievements .sec-title-jp {
font-size: 21px;
}
.sec-achievements .achieve-stats {
gap: 16px;
margin-bottom: 32px;
} .sec-achievements .achieve-stats img {
width: calc(50% - 8px);
}
.sec-achievements .achieve-industries-title {
font-size: 16px;
}
.sec-achievements .achieve-industry-tag {
font-size: 13px;
padding: 5px 14px;
}
}  @media screen and (max-width: 960px) {
.section-cases {
width: 100%;
padding: 70px 40px;
box-sizing: border-box;
}
.section-cases-title {
margin-bottom: 40px;
}
.section-cases-title h2 {
font-size: 26px;
}
.section-cases .watermark {
font-size: 56px;
top: -36px;
} .cases-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
max-width: 820px;
gap: 24px;
}
.case-card {
width: calc(50% - 12px);
}
.case-card-logo {
max-width: 85%;
}
} @media screen and (max-width: 640px) {
.section-cases {
padding: 50px 20px;
}
.section-cases-title {
margin-bottom: 28px;
}
.section-cases-title h2 {
font-size: 21px;
}
.section-cases .watermark {
font-size: 40px;
top: -26px;
} .cases-grid {
max-width: 440px;
}
.case-card {
width: 100%;
}
.case-card-logo-area {
height: 200px;
}
.case-card-logo {
max-height: 120px;
}
.case-card-body {
padding: 24px;
gap: 20px;
}
.case-card-company {
font-size: 16px;
}
}  @media screen and (max-width: 960px) {
.section-usecase {
width: 100%;
padding: 70px 40px;
gap: 48px;
box-sizing: border-box;
}
.section-usecase-title h2 {
font-size: 26px;
}
.section-usecase .watermark {
font-size: 56px;
top: -36px;
} .usecase-carousel {
width: 100%;
}
.usecase-card {
width: 100%;
}
.usecase-side-btn {
width: 52px;
height: 52px;
font-size: 20px;
}
.usecase-card-header {
padding: 28px;
}
.usecase-card-header-top {
flex-wrap: wrap;
gap: 12px;
}
.usecase-card-type {
font-size: 22px;
}
.usecase-card-requirement {
font-size: 15px;
}
.usecase-card-body {
padding: 28px;
gap: 28px;
}
.usecase-ba-header-item {
height: 64px;
}
.usecase-ba-header-item span {
font-size: 22px;
} .usecase-row {
grid-template-columns: 1fr 44px 1fr;
gap: 16px;
}
.usecase-before-card,
.usecase-after-card {
padding: 20px;
}
.usecase-after-card {
padding-top: 26px;
}
} @media screen and (max-width: 640px) {
.section-usecase {
padding: 50px 20px;
gap: 36px;
}
.section-usecase-title h2 {
font-size: 21px;
}
.section-usecase .watermark {
font-size: 40px;
top: -26px;
} .usecase-side-btn {
display: none;
} .usecase-slides {
gap: 14px;
}
.usecase-card {
width: 88%;
}
.usecase-card-header {
padding: 22px 20px;
}
.usecase-card-type {
font-size: 17px;
}
.usecase-card-badge {
font-size: 12px;
padding: 6px 14px;
}
.usecase-card-requirement {
font-size: 13px;
}
.usecase-card-body {
padding: 20px;
gap: 24px;
}
.usecase-ba-headers {
gap: 12px;
}
.usecase-ba-header-item {
height: 52px;
}
.usecase-ba-header-item span {
font-size: 18px;
}
.usecase-ba-arrow-icon {
width: 20px;
font-size: 16px;
} .usecase-rows {
gap: 40px;
} .usecase-row {
grid-template-columns: 1fr;
gap: 10px;
} .usecase-row + .usecase-row {
border-top: 1px solid #d1d5dc;
padding-top: 40px;
} .usecase-row-arrow-circle {
transform: rotate(90deg);
}
.usecase-before-card,
.usecase-after-card {
padding: 18px;
}
.usecase-after-card {
padding-top: 24px;
}
}  @media screen and (max-width: 960px) {
.section-service {
width: 100%;
padding: 70px 40px;
box-sizing: border-box;
}
.section-service-title {
margin-bottom: 40px;
}
.section-service-title h2 {
font-size: 26px;
}
.section-service .watermark {
font-size: 56px;
top: -36px;
} .service-main-card {
width: 100%;
max-width: 1280px;
flex-direction: column-reverse;
}
.service-main-content {
padding: 36px;
}
.service-main-image {
width: 100%;
height: 320px;
} .service-cards-row {
width: 100%;
max-width: 860px;
gap: 24px;
}
.service-card {
width: calc(50% - 12px);
}
} @media screen and (max-width: 640px) {
.section-service {
padding: 50px 20px;
}
.section-service-title {
margin-bottom: 28px;
}
.section-service-title h2 {
font-size: 21px;
}
.section-service .watermark {
font-size: 40px;
top: -26px;
}
.service-main-content {
padding: 24px;
}
.service-main-heading {
font-size: 22px;
}
.service-main-image {
height: 220px;
} .service-cards-row {
max-width: 420px;
gap: 20px;
}
.service-card {
width: 100%;
}
}  @media screen and (max-width: 960px) {
.section-faq {
width: 100%;
padding: 70px 40px;
}
.section-faq-title {
margin-bottom: 36px;
}
.section-faq-title h2 {
font-size: 26px;
}
} @media screen and (max-width: 640px) {
.section-faq {
padding: 50px 20px;
}
.section-faq-title {
margin-bottom: 28px;
}
.section-faq-title h2 {
font-size: 21px;
}
.faq-list {
gap: 14px;
}
.faq-item {
padding: 20px;
}
.faq-q-label,
.faq-a-label {
font-size: 18px;
}
.faq-q-text {
font-size: 15px;
}
.faq-a-text {
font-size: 14px;
}
}  @media screen and (max-width: 960px) {
.section-contact {
width: 100%;
padding: 70px 40px;
}
.contact-title {
font-size: 28px;
}
} @media screen and (max-width: 640px) {
.section-contact {
padding: 50px 20px;
gap: 32px;
}
.contact-title {
font-size: 24px;
}
.contact-form {
gap: 16px;
}
}  @media screen and (max-width: 960px) {
.footer {
width: 100%;
padding: 50px 40px;
}
} @media screen and (max-width: 640px) {
.footer {
padding: 40px 20px;
gap: 28px;
}
.footer-logo {
font-size: 24px;
}
}  .contact-right .wpcf7-form {
display: flex;
flex-direction: column;
gap: 20px;
} .form-group .wpcf7-form-control-wrap {
display: block;
width: 100%;
} .form-group .wpcf7-form-control-wrap input[type="text"],
.form-group .wpcf7-form-control-wrap input[type="email"],
.form-group .wpcf7-form-control-wrap input[type="tel"],
.form-group .wpcf7-form-control-wrap textarea {
width: 100%;
box-sizing: border-box;
} .form-radio-group .wpcf7-radio {
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
padding-top: 4px;
}
.form-radio-group .wpcf7-list-item {
margin: 0;
}
.form-radio-group .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-noto);
font-size: 14px;
color: var(--dark-text);
cursor: pointer;
}
.form-radio-group .wpcf7-list-item input[type="radio"] {
width: 18px;
height: 18px;
margin: 0;
padding: 0;
border: none;
border-radius: 0;
accent-color: #7fa8dd;
cursor: pointer;
flex-shrink: 0;
} .contact-right input[type="submit"].form-submit {
width: 160px;
height: 48px;
background: #ff8904;
border: none;
border-radius: 9999px;
font-family: var(--font-noto);
font-weight: 500;
font-size: 16px;
color: var(--white);
cursor: pointer;
align-self: center;
letter-spacing: -0.31px;
display: block;
margin: 0 auto;
} .contact-right .wpcf7-response-output {
margin: 16px 0 0;
border: 1px solid #ddd;
padding: 12px 16px;
font-size: 14px;
color: var(--dark-text);
border-radius: 4px;
}
.contact-right .wpcf7 form.invalid .wpcf7-response-output,
.contact-right .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-right .wpcf7 form.payment-required .wpcf7-response-output {
border-color: #e74c3c;
color: #e74c3c;
background: #fdecea;
}
.contact-right .wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
color: #1e7e34;
background: #e8f5e9;
} .contact-right .wpcf7-not-valid-tip {
color: #e74c3c;
font-size: 12px;
margin-top: 4px;
display: block;
} .contact-right .wpcf7-spinner {
display: block;
margin: 12px auto 0;
}