@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600&family=Poppins&family=Zen+Kurenaido&display=swap");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-break: break-all;
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-overflow-scrolling: touch;
}
body,
button,
input,
select,
textarea {
margin: 0;
padding: 0;
overflow-x: hidden; font-size: 18px;
line-height: 1.8;
font-family: 'Poppins', 'Noto Sans JP', sans-serif;
}
@media (max-width:768px) {
body,
button,
input,
select,
textarea {
font-size: 17px;
line-height: 1.7;
}
}
@media (max-width:480px) {
body,
button,
input,
select,
textarea {
font-size: 16px;
line-height: 1.6;
}
}
body {
position: relative;
color: #333;
background: #fff;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
letter-spacing: 0.075em;
font-weight: 500;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
h1,
.h1 {
font-size: 26px;
font-size: 1.6em;
line-height: 1.5;
}
h2,
.h2 {
font-size: 24px;
font-size: 1.5em;
line-height: 1.6;
}
h3,
.h3 {
font-size: 22px;
font-size: 1.4em;
line-height: 1.7;
}
h4,
.h4 {
font-size: 20px;
font-size: 1.3em;
line-height: 1.7;
}
h5,
.h5 {
font-size: 18px;
font-size: 1.2em;
line-height: 1.7;
}
h6,
.h6 {
font-size: 16px;
font-size: 1.1em;
line-height: 1.7;
}
a {
color: #459EA5;
text-decoration: none;
outline: none;
transition: all 0.3s ease;
}
a:hover {
color: #D13933;
}
.link-black {
color: #333;
}
.link-black:hover {
color: #999;
}
img {
-ms-interpolation-mode: bicubic;
border: 0;
vertical-align: middle;
image-rendering: -webkit-optimize-contrast;
}
hr {
border: none !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
margin: 25px 0;
}
b,
strong {
font-weight: 700;
}
::placeholder {
color: #ccc;
}
.d-block {
display: block !important;
}
.d-inline {
display: inline-block !important;
}
.spacing {
letter-spacing: 0.075em !important;
}
.spacing-lg {
letter-spacing: 0.15em !important;
}
.spacing-min {
letter-spacing: 0.05em !important;
}
.m-0 {
margin: 0 !important;
}
.m-auto {
margin: auto !important;
}
.mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-025 {
margin-bottom: 0.25rem !important;
}
.mb-05 {
margin-bottom: 0.5rem !important;
}
.mb-075 {
margin-bottom: 0.75rem !important;
}
.mb-1 {
margin-bottom: 1rem !important;
}
.mb-15 {
margin-bottom: 1.5rem !important;
}
.mb-2 {
margin-bottom: 2rem !important;
}
.mb-3 {
margin-bottom: 3rem !important;
}
.mb-35 {
margin-bottom: 3.5rem !important;
}
@media (max-width:640px) {
.mb-3 {
margin-bottom: 2.5rem !important;
}
.mb-35 {
margin-bottom: 2.5rem !important;
}
}
.mb-35 {
margin-bottom: 3.5rem !important;
}
.mb-4 {
margin-bottom: 4rem !important;
}
.mb-section {
margin-bottom: 10% !important;
}
.mr-05 {
margin-right: 0.15rem !important;
}
.mr-1 {
margin-right: 0.25rem !important;
}
.mr-2 {
margin-right: 0.5rem !important;
}
.mr-3 {
margin-right: 0.75rem !important;
}
.mr-4 {
margin-right: 1rem !important;
}
.ml-1 {
margin-left: 0.25rem !important;
}
.ml-2 {
margin-left: 0.5rem !important;
}
.ml-3 {
margin-left: 0.75rem !important;
}
.ml-4 {
margin-left: 1rem !important;
}
.mx-4 {
margin-right: 1rem !important;
margin-left: 1rem !important;
}
.p-0 {
padding: 0 !important;
}
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.font-3x {
font-size: 3em !important;
}
.font-25x {
font-size: 2.5em !important;
}
.font-2x {
font-size: 2em !important;
}
.font-ll2 {
font-size: 1.8em !important;
}
.font-ll {
font-size: 1.6em !important;
}
.font-lg {
font-size: 1.4em !important;
}
.font-md {
font-size: 1.2em !important;
}
.font-ms {
font-size: 1.1em !important;
}
.font-mss {
font-size: 1.05em !important;
}
.font-normal {
font-size: 1em !important;
}
.font-mm {
font-size: 0.95em !important;
}
.font-m {
font-size: 0.9em !important;
}
.font-sm {
font-size: 0.85em !important;
}
.font-s {
font-size: 0.8em !important;
}
.font-ss {
font-size: 0.7em !important;
}
.font-sss {
font-size: 0.6em !important;
}
@media (max-width:1024px) {
.font-2x {
font-size: 1.8em !important;
}
.font-25x {
font-size: 2em !important;
}
}
@media (max-width:768px) {
.font-lg {
font-size: 1.3em !important;
}
.font-2x {
font-size: 1.6em !important;
}
.font-25x {
font-size: 1.8em !important;
}
}
.bold {
font-weight: bold !important;
}
.nobold {
font-weight: normal !important;
}
.bold300 {
font-weight: 300 !important;
}
.bold500 {
font-weight: 500 !important;
}
.bold600 {
font-weight: 600 !important;
}
.line-height1 {
line-height: 1;
}
.line-height12 {
line-height: 1.2;
}
.line-height13 {
line-height: 1.3;
}
.line-height14 {
line-height: 1.4;
}
.line-height15 {
line-height: 1.5;
}
.line-height16 {
line-height: 1.6;
}
.line-height2 {
line-height: 2;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
:root {
--color-green: #459EA5 !important;
--color-red: #D13933 !important;
--color-yellow: #F7B400 !important;
--color-violet: #6F57A2 !important;
--color-blue: #006eff !important;
--color-orange: #ff761b !important;
--color-gray: #9E9E9F !important;
--color-black: #000000 !important;
--color-white: #ffffff !important;
--color-body: #333333 !important;
}
.font-green {
color: var(--color-green) !important;
}
.font-red {
color: var(--color-red) !important;
}
.font-yellow {
color: var(--color-yellow) !important;
}
.font-violet {
color: var(--color-violet) !important;
}
.font-blue {
color: var(--color-blue) !important;
}
.font-orange {
color: var(--color-orange) !important;
}
.font-gray {
color: var(--color-gray) !important;
}
.font-black {
color: var(--color-black) !important;
}
.font-white {
color: var(--color-white) !important;
}
.font-body {
color: var(--color-body) !important;
} .arrowWrap {
position: absolute;
left: 4%;
bottom: 0;
z-index: 9;
}
.arrowInner a {
display: block;
backface-visibility: hidden;
color: #333;
}
.arrowInner p {
display: block;
font-size: 14px;
text-align: end;
transform: translate3d(0, 0, 0) perspective(0);
backface-visibility: hidden;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
color: #333;
font-weight: 400;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.arrowInner:hover p {
color: #999;
}
.arrow {
width: 1px;
height: 100px;
margin: 25px auto 0;
background-color: rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.arrow::before {
content: '';
width: 2px;
height: 100px;
margin: 50px auto 0;
background-color: #555;
position: absolute;
top: -150px;
left: 1px;
-webkit-animation: arrow 2s ease-in-out 0s infinite normal;
animation: arrow 2s ease-in-out 0s infinite normal;
}
@keyframes arrow {
0% {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
60% {
-webkit-transform: translate3d(-50%, 100px, 0);
transform: translate3d(-50%, 100px, 0);
}
100% {
-webkit-transform: translate3d(-50%, 100px, 0);
transform: translate3d(-50%, 100px, 0);
}
}
@media (max-width:480px) {
.arrow {
height: 60px;
}
.arrow::before {
height: 60px;
}
.arrowInner p {
font-size: 10px;
}
} .arrowWrapUp {
position: relative;
position: fixed;
right: 1%;
bottom: 0;
z-index: 9;
}
@media (max-width:1024px) {
.arrowWrapUp {
display: none !important;
}
}
.arrowUpInner a {
display: block;
}
.arrowUpInner p {
font-size: 14px;
display: inline-block;
text-align: end;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
color: #333;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.arrowUpInner:hover p {
color: #999;
}
.arrowUp {
width: 1px;
height: 100px;
margin: 40px auto 0;
background-color: rgba(0, 0, 0, 0.15);
position: relative;
overflow: hidden;
transform: rotateZ(180deg);
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.arrowUp::before {
content: '';
width: 2px;
height: 100px;
margin: 50px auto 0;
background-color: #555;
position: absolute;
top: -150px;
left: 0;
-webkit-animation: arrow 2s ease-in-out 0s infinite normal;
animation: arrow 2s ease-in-out 0s infinite normal;
}
.smp-pageup {
display: none;
}
.smp-pageup a {
display: inline-block;
font-size: 3em;
line-height: 1;
}
@media (max-width:1024px) {
.smp-pageup {
display: block;
}
} .tab_btn.left-cell,
.left-cell {
text-align: left;
}
.tab_btn.right-cell,
.right-cell {
text-align: right;
}
.tab_btn.center-cell,
.center-cell {
text-align: center;
}
.tab_btn a {
display: inline-block;
position: relative;
font-size: 0.9em;
padding: 0.9em 1em;
color: var(--color-green);
text-align: center;
text-decoration: none;
transition: .2s;
min-width: 220px;
letter-spacing: 0.075em;
border: 1px solid var(--color-green);
background: #fff;
transition: all ease .5s;
border-radius: 50px;
box-shadow: 5px 5px 0 -1px rgba(34, 119, 134, 0.1);
}
.tab_btn a:before {
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
margin-left: -15px;
content: "";
background: var(--color-green);
width: 50px;
height: 1px;
transition: all ease .5s;
}
.tab_btn a:hover {
color: #fff;
background: var(--color-green);
}
.tab_btn a:hover:before {
width: 0;
} .s_sbm ul {
list-style: none;
display: block;
width: 100%;
margin: 0;
padding: 0;
margin: calc(2% + 45px) 0 0;
text-align: right;
}
.article-body .s_sbm ul {
padding-top: calc(1.5% + 10px);
border-top: 1px solid rgba(0, 0, 0, 0.15);
margin-bottom: 3em;
}
.s_sbm li {
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 1;
font-size: 36px;
margin: 0 5px;
}
.s_sbm li.sbm_title {
margin-right: 5px;
font-size: 0.8em;
}
.s_sbm li a {
color: #000;
display: block;
}
.s_sbm li.sf a:hover {
color: #1877f2;
}
.s_sbm li.st a:hover {
color: #777;
}
.s_sbm li.sl a:hover {
color: #06c755;
}
.s_sbm li.sg a:hover {
color: #dd4b39;
}
@media (max-width:480px) {
.s_sbm {
text-align: center;
}
.s_sbm ul {
margin: 30px auto 20px;
}
.s_sbm li {
font-size: 30px;
}
}
@media (max-width:360px) {
.s_sbm ul {
margin: 30px 0 0;
font-size: 0.95em;
}
.s_sbm li a {
width: 36px;
}
.s_sbm li.sl {
margin-top: 1px;
}
}  .full-width-container {
position: relative;
background: #fff;
}
.bg-over {
position: relative;
}
.bg-over:after {
content: '';
display: block;
position: fixed;
left: 0;
bottom: -100px;
width: 70vw;
height: 70vw;
max-width: 870px;
max-height: 870px;
background: url(//z-i-x.co.jp/wp-content/themes/corp24_01/images/bg_over.png) no-repeat bottom center;
background-size: contain;
pointer-events: none;
opacity: .5;
}  .home .bg-over:after {
opacity: 1;
} .page-content {
width: 100%;
margin: 0 auto;
}
section {
position: relative;
display: block;
padding: 10% 7%;
}
section.pt-half {
padding: 5% 7% 10%;
}
section.pb-half {
padding: 10% 7% 5%;
}
section.py-half {
padding: 5% 7%;
}
.article {
display: block;
width: 100%;
max-width: 1280px;
margin: auto;
text-align: left;
}
.container {
display: block;
width: 100%;
max-width: 1280px;
margin: auto;
}
.w-wide {
max-width: 1600px;
}
.w-middle {
max-width: 1440px;
}
.w-min {
max-width: 1000px;
}
@media (max-width:768px) {
section {
padding: 12% 5%;
}
section.pt-half {
padding: 6% 5% 12%;
}
section.pb-half {
padding: 12% 5% 6%;
}
section.py-half {
padding: 6% 5%;
}
}
@media (max-width:480px) {
section {
padding: 14% 20px;
}
section.pt-half {
padding: 8% 20px 14%;
}
section.pb-half {
padding: 14% 20px 8%;
}
section.py-half {
padding: 8% 20px;
}
}
.page-header {
padding-top: calc(4% + 100px); } .page-title {
font-size: 3.6em;
font-weight: bold;
margin: 0;
text-align: center;
letter-spacing: .1em;
text-indent: .1em;
} .page-subtitle {
display: block;
font-size: 0.4em;
font-weight: normal;
text-align: center;
letter-spacing: .5em;
text-indent: .5em;
}
@media (max-width:1024px) {
.page-header {
font-size: 0.9em;
}
}
@media (max-width:768px) {
.page-header {
font-size: 0.8em;
}
}
@media (max-width:640px) {
.page-header {
font-size: 0.7em;
}
}
@media (max-width:480px) {
.page-header {
font-size: 0.6em;
}
} .site-header {
position: fixed;
height: 100px;
top: 0;
left: 0;
width: 100%;
background: transparent;
z-index: 1000;
transition: background-color 0.3s ease, height 0.3s ease, padding 0.3s ease;
display: flex;
justify-content: center;
} .scrolled {
background-color: rgba(255, 255, 255, 0);
height: 70px;
backdrop-filter: blur(1px);
} .header-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0 7%;
} .site-logo img {
height: 40px;
width: auto;
vertical-align: middle;
transition: height 0.3s ease;
}
.site-logo {
display: flex;
justify-content: center;
flex: 1;
transform: translateY(-100%);
opacity: 0;
transition: .5s ease;
} .scrolled .site-logo,
.scrolled .site-name {
transform: translateY(0);
opacity: 1;
} .scrolled .site-logo img {
transition: height 0.3s ease;
}
.site-logo a {
color: #333;
} .site-name {
color: #333;
font-size: 1.6em;
font-weight: 700;
} .site-footer {
position: relative;
z-index: 2;
display: block;
background: #f6f6f7;
}
.footer-menu {
display: flex;
justify-content: center;
list-style: none;
margin: 0 auto 2em;
}
.footer-menu li {
margin: 0 1em;
}
.footer-menu li a {
font-size: 0.9em;
color: #333;
}
.footer-menu li a:hover {
opacity: .5;
}
.footer-logo {
width: 50%;
max-width: 220px;
margin: 0 auto 2em;
}
.footer-logo img {
width: 100%;
height: auto;
}
@media (max-width:768px) {
.footer-menu {
flex-direction: column;
width: 100%;
}
.footer-menu li a {
display: block;
font-size: 1em;
padding: 10px;
}
} .site-navigation {
display: flex;
justify-content: flex-end;
flex: 1;
margin: 0; padding: 0; } .primary-menu {
display: flex; align-items: center; list-style: none; padding: 0; margin: 0; } .primary-menu li {
display: inline; margin: 0 45px; font-weight: bold; } .primary-menu a {
color: #333; text-decoration: none; line-height: 1.5; }
.primary-menu a:hover {
color: #999;
}
@media (max-width:1366px) {
.header-container {
padding: 0 5%;
}
.primary-menu li {
margin: 0 40px;
}
}
@media (max-width:1280px) {
.primary-menu li {
margin: 0 35px;
}
.primary-menu li:first-child {
margin-left: 0;
}
}
@media (max-width:1080px) {
.header-container {
padding: 0 2%;
}
.primary-menu li:first-child {
margin-left: 0;
}
}
@media (max-width:1024px) {
.scrolled {
height: 80px;
}
.site-navigation {
display: none;
}
.site-logo {
justify-content: flex-start;
margin-left: 4%;
}
}
@media (max-width:480px) {
.scrolled {
height: 70px;
}
.site-logo {
margin-left: 12px;
}
.site-logo img {
height: 32px;
}
} .smp_menu {
display: none;
overflow: hidden;
}
.openbtn {
position: relative;
position: fixed;
z-index: 9999;
top: 16px;
right: calc(2% + 15px);
cursor: pointer;
width: 50px;
height: 50px;
}
.openbtn span {
display: inline-block;
transition: all .3s;
position: absolute;
width: 50px;
height: 3px;
background: #333333;
}
.openbtn span:nth-of-type(1) {
top: 10px;
}
.openbtn span:nth-of-type(2) {
top: 22px;
}
.openbtn span:nth-of-type(3) {
top: 34px;
}
.openbtn.active:before {
transform: translate(125%, -156%);
}
.openbtn.active span:nth-of-type(1) {
transform: rotate(45deg);
margin-top: 14px;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
transform: rotate(-45deg);
margin-top: -10px;
}
#g-nav {
position: relative;
position: fixed;
z-index: -1;
opacity: 0;
top: 0;
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
background: rgba(0, 0, 0, 0.5);
transition: all .3s;
transition-delay: .3s;
}
#g-nav.panelactive {
opacity: 1;
transition: .3s;
z-index: 999;
}
.g-nav_bg {
position: fixed;
top: 50%;
left: 100%;
width: 600px;
height: 600px;
transform: translateY(-50%);
border-radius: 50%;
transition: .5s ease;
background: #fff;
}
.g-nav_bg.slidepanel {
left: 40%;
width: 1600px;
height: 1600px;
}
#g-nav .g-nav-container {
position: absolute;
top: 0;
right: 0;
width: 45%;
height: 100%;
margin-left: auto;
padding: 0;
display: flex;
justify-content: center;
flex-direction: column;
opacity: 0;
}
#g-nav.panelactive .g-nav-container {
opacity: 1;
}
@keyframes gnaviAnime {
0% {
opacity: 0;
transform: translateX(50%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.nav-logo {
display: block;
text-align: left;
margin-bottom: 2em;
opacity: 0;
transform: translateX(50%);
}
.panelactive .nav-logo {
animation: gnaviAnime .5s ease forwards;
animation-delay: .2s;
}
.nav-logo img {
width: 76%;
max-width: 220px;
height: auto;
}
.nav-content {
position: relative;
}
.smp-menu-list {
display: flex;
flex-direction: column;
list-style: none;
}
.smp-menu-list li a {
position: relative;
display: block;
width: 100%;
max-width: 160px;
height: 100%;
margin: 0;
padding: 15px 0;
color: #0f0f0f;
font-size: 1.4rem;
text-align: left;
}
.panelactive .smp-menu-list li {
opacity: 0;
transform: translateX(50%);
animation: gnaviAnime .5s ease forwards;
}
.panelactive .smp-menu-list li:nth-child(1) {
animation-delay: .3s;
}
.panelactive .smp-menu-list li:nth-child(2) {
animation-delay: .4s;
}
.panelactive .smp-menu-list li:nth-child(3) {
animation-delay: .5s;
}
.panelactive .smp-menu-list li:nth-child(4) {
animation-delay: .6s;
}
.panelactive .smp-footer {
margin-top: 2em;
position: relative;
opacity: 0;
transform: translateX(50%);
animation: gnaviAnime .5s ease forwards;
animation-delay: .7s;
}
.smp-menu-site-info p {
line-height: 1.4;
letter-spacing: 0;
}
.smp-menu-list li .sub-menu {
display: none;
}
.scroll-prevent {
position: fixed;
z-index: -1;
width: 100%;
}
@media (max-width: 1024px) {
.smp_menu {
display: block;
}
.navi_wrap,
.header_sns {
display: none;
}
}
@media (max-width: 768px) {
.g-nav_bg.slidepanel {
left: 35%;
width: 1200px;
height: 1200px;
}
#g-nav .g-nav-container {
width: 50%;
}
.smp-menu-list li a {
font-size: 1.3rem;
}
}
@media (max-width: 640px) {
.g-nav_bg.slidepanel {
left: 30%;
width: 1100px;
height: 1100px;
}
#g-nav .g-nav-container {
width: 50%;
}
.nav-logo img {
max-width: 200px;
}
.smp-menu-list li a {
padding: 12px 0;
font-size: 1.2rem;
}
.site-info span {
display: none;
}
}
@media (max-width: 560px) {
.g-nav_bg.slidepanel {
width: 1000px;
height: 1000px;
}
}
@media (max-width: 480px) {
.openbtn {
top: 13px;
width: 40px;
height: 40px;
}
.openbtn span {
width: 40px;
}
.openbtn span:nth-of-type(1) {
top: 10px;
}
.openbtn span:nth-of-type(2) {
top: 20px;
}
.openbtn span:nth-of-type(3) {
top: 30px;
}
.openbtn.active span:nth-of-type(1) {
margin-top: 10px;
}
.openbtn.active span:nth-of-type(3) {
margin-top: -10px;
}
.g-nav_bg.slidepanel {
width: 800px;
height: 800px;
}
.nav-logo {
margin-bottom: 1.5em;
}
.smp-menu-list li a {
padding: 10px 0;
font-size: 1.1rem;
}
.panelactive .smp-footer {
margin-top: 1.5em;
font-family: 0.85em;
}
} .main-visual {
position: relative;
width: 100%;
height: 100vh;
height: calc(var(--vh, 1vh) * 100); } .main-visual-bg {
position: relative;
position: fixed;
overflow: hidden;
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: url(//z-i-x.co.jp/wp-content/themes/corp24_01/images/zix_keyvisual.png); background-size: cover; background-position: center bottom; background-repeat: no-repeat;
filter: grayscale(0); }
.main-visual-bg::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 25%;
background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
pointer-events: none;
} .message-section {
position: relative;
overflow: hidden;
padding: 60px 0;
text-align: center; --bg: #ffffff; --dim-rgb: 50 55 119; --dim-max: 0.90; --dim: 0; } .message-section::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: transparent; } .message-section::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none; background: linear-gradient(
180deg,
rgb(var(--dim-rgb) / 0) 0%,
rgb(var(--dim-rgb) / calc(var(--dim) * var(--dim-max) * 0.2)) 2%,
rgb(var(--dim-rgb) / calc(var(--dim) * var(--dim-max) * 0.4)) 4%,
rgb(var(--dim-rgb) / calc(var(--dim) * var(--dim-max) * 0.6)) 7%,
rgb(var(--dim-rgb) / calc(var(--dim) * var(--dim-max) * 0.85)) 10%,
rgb(var(--dim-rgb) / calc(var(--dim) * var(--dim-max))) 12%,
rgb(var(--dim-rgb) / calc(var(--dim) * var(--dim-max))) 100%
);
} .message-section > * {
position: relative;
z-index: 2;
}
.message-content {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
}
.message-text {
font-family: 'Zen Kurenaido', sans-serif;
font-size: 40px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: #000000;
}
.message-line {
display: block;
}
.message-services {
font-family: 'Poppins', sans-serif;
font-size: 26px;
font-weight: 700;
line-height: 2;
letter-spacing: 0.1em;
color: #ffffff;
margin-top: 60px;
} .main-visual-content {
position: absolute; top: 50%; left: 7.5%; z-index: 2; transform: translateY(-50%); text-shadow: 0 0 10px rgba(0, 0, 0, 0.4); width: 80%; } .main-copy {
font-size: 3.8em;
font-weight: bold;
line-height: 1.2;
} .sub-copy {
font-size: 1.7em;
margin-bottom: 0.5em;
}
.main-copy .break {
display: inline-block;
}
@media (max-width:1366px) {
.main-visual-bg {
background-position: right 18% center;
}
.main-copy {
font-size: 3.4em;
}
.sub-copy {
font-size: 1.5em;
}
}
@media (max-width:1280px) {
.main-visual-bg {
background-position: right 30% center;
}
.main-visual-content {
left: 6.5%;
}
.main-copy {
font-size: 3em;
}
.sub-copy {
font-size: 1.4em;
}
}
@media (max-width:1080px) {
.main-visual-content {
top: 35%;
}
.main-visual-bg {
background-position: right 25% center;
}
}
@media (max-width:1024px) {
.main-visual-content {
top: 35%;
left: 7.5%;
}
.main-copy {
font-size: 3.6em;
}
.sub-copy {
font-size: 1.6em;
}
.main-visual-bg {
background-size: cover;
background-position: right 28% bottom;
}
}
@media (max-width:1024px) {
.main-visual-content {
top: 33%;
}
}
@media (max-width:767px) {
.main-copy {
font-size: 3.5em;
}
}
@media (max-width:640px) {
.main-visual-content {
left: 7%;
}
.main-copy {
font-size: 3.4em;
}
.sub-copy {
font-size: 1.4em;
}
}
@media (max-width:560px) {
.main-copy {
font-size: 3em;
}
.sub-copy {
font-size: 1.2em;
letter-spacing: 0em;
}
}
@media (max-width:480px) {
.main-copy {
font-size: 2.3em;
}
.sub-copy {
font-size: 1.05em;
}
.main-visual-bg {
background-position: right 30% bottom;
}
} .highlight {
font-weight: bold; color: #333; display: inline-block; letter-spacing: normal; } .separator {
letter-spacing: normal; display: inline-block;
color: #555; } .separator {
margin-right: 10px; } .top-banner {
display: flex;
justify-content: space-between;
list-style: none;
flex-wrap: wrap;
}
.top-banner li {
width: 48%;
}
.top-banner li img {
width: 100%;
height: auto;
border-radius: calc(0.5vw + 10px);
box-shadow: 7px 7px 40px rgba(0, 0, 0, 0.4);
transition: .5s ease;
}
.top-banner li a:hover img {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}
@media (max-width:1279px) {
.top-banner li {
width: 100%;
max-width: 720px;
margin: auto;
}
.top-banner li:first-child {
margin-bottom: 2em;
}
}  .news-wrap {
display: block;
list-style: none;
text-align: left;
}
.news-wrap li a {
position: relative;
display: block;
color: #333;
padding-bottom: 1.25em;
margin-bottom: 1.25em;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.news-wrap li a:before {
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
content: "\f30b";
font-family: "Line Awesome Free", "Line Awesome Brands";
font-weight: 900;
font-size: 1.4em;
color: var(--color-green);
transition: all .3s ease;
}
.news-wrap li a:hover {
padding-left: 35px;
}
.news-wrap li a:hover:before {
transform: translate(0, -50%);
} .article-header {
display: block;
margin-bottom: 3em;
}
.article .date {
margin-bottom: 1em;
}
.article-header .title {
font-size: 1.8em;
font-weight: 500;
}
.article-body p {
margin: 1em 0;
}  .sub-section-header {
position: relative;
display: block;
margin-bottom: 4em;
} .sub-section-title {
font-size: 7em;
font-weight: 600;
color: #e7e7e7;
line-height: 1;
} .sub-section-description {
position: relative;
display: block;
font-size: 0.3em;
color: #333;
font-weight: 600;
margin-top: -0.75em;
margin-left: 1em;
}
.sub-section-description:before {
position: absolute;
top: 50%;
right: 100%;
content: "";
width: 2000px;
height: 1px;
background: #333;
margin-right: 0.5em;
}
@media(max-width:1280px) {
.sub-section-header {
margin-bottom: 3.5em;
}
.sub-section-title {
font-size: 5.5em;
}
}
@media(max-width:1080px) {
.sub-section-header {
margin-bottom: 3.2em;
}
.sub-section-title {
font-size: 5.5em;
}
}
@media(max-width:1024px) {
.sub-section-header {
margin-bottom: 2.8em;
}
.sub-section-title {
font-size: 4.5em;
line-height: 1.4;
}
.sub-section-description {
font-size: 0.35em;
}
}
@media(max-width:768px) {
.sub-section-header {
margin-bottom: 2.4em;
}
.sub-section-title {
font-size: 4em;
line-height: 1.2;
}
.sub-section-description {
font-size: 0.375em;
}
}
@media(max-width:640px) {
.sub-section-header {
margin-bottom: 2.2em;
}
.sub-section-title {
font-size: 3em;
}
.sub-section-description {
font-size: 0.45em;
}
}
@media(max-width:480px) {
.sub-section-header {
margin-bottom: 2em;
}
.sub-section-title {
font-size: 2.5em;
}
.sub-section-description {
font-size: 0.52em;
margin-left: 0.5em;
margin-top: -0.5em;
}
}
@media(max-width:560px) {} .services-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
} .service {
width: 48%;
box-sizing: border-box;
margin-bottom: 4%;
padding: 2.5%;
background-color: #fff;
border-radius: calc(1vw + 10px);
box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.1);
}
.service-icon {
display: block;
margin: 0 auto;
text-align: center;
padding: 2em 0;
}
.service-text {
display: block;
text-align: left;
}
.service-icon img {
width: 20%;
max-width: 180px;
height: auto;
margin: auto;
opacity: .5;
} .service-title {
display: block;
text-align: center;
font-size: 1.6em;
font-weight: bold;
color: #333;
margin-bottom: 1em;
}
.service-title-sub {
display: block;
text-align: center;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 1em;
} .service-description {
text-align: left;
color: #555;
margin: 0;
padding: 0 4%;
}
@media (max-width:1600px) {
.service {
padding: 4%;
}
.service-icon img {
width: 35%;
max-width: 180px;
}
.service-title {
font-size: 1.5em;
text-align: center;
}
.service-title-sub {
text-align: left;
font-size: 1.15em;
}
.service-title-sub br {
display: none;
}
.service-description {
padding: 0;
}
}
@media (max-width:1366px) {
.service {
display: flex;
width: 100%;
padding: 6%;
}
.service-icon {
display: flex;
width: 24.5%;
text-align: center;
}
.service-text {
flex: 1;
padding-left: 5%;
}
.service-icon img {
width: 80%;
max-width: 160px;
}
.service-title {
text-align: left;
}
}
@media (max-width:1024px) {
.service-title-sub {
font-size: 1.1em;
}
}
@media (max-width:852px) {
.service {
flex-direction: column;
width: 100%;
margin-bottom: 4%;
padding: 8%;
}
.service-icon {
width: 100%;
}
.service-icon img {
width: 26%;
max-width: 180px;
}
.service-text {
padding-left: 0;
}
.service-title {
text-align: center;
font-size: 1.5em;
}
}
@media (max-width:640px) {
.service {
width: 100%;
margin-bottom: 2em;
padding: calc(5% + 0.5em);
}
.service-icon img {
width: 40%;
max-width: 150px;
}
.service-title {
font-size: 1.4em;
}
} table,
td,
th {
border-collapse: collapse;
}
table {
width: 100%;
}
tr {
border-bottom: 1px solid #ddd;
}
td,
th {
padding: 20px;
}
th {
width: 25%;
padding: 20px 0;
}
@media (max-width:480px) {
th {
width: 4em;
}
}  .smf-button-control__control,
.smf-text-control__control,
.smf-textarea-control__control {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
font-size: 100% !important;
font-family: inherit !important;
} .smf-button-control__control {
font-size: 1.1em !important;
line-height: 1 !important;
padding: 1.25em 3em !important;
background: var(--color-green) !important;
color: #fff !important;
border: none !important;
transition: background-color 0.3s ease !important;
letter-spacing: 0.15em;
text-indent: 0.15em;
margin-top: 1em;
border-radius: 5px !important;
} .smf-button-control__control[data-action="back"] {
background: #666 !important;
color: #fff !important;
text-decoration: none !important;
} .smf-button-control__control:not([data-action="back"]):hover,
.smf-button-control__control:not([data-action="back"]):focus {
background: var(--color-red) !important;
} .grecaptcha-badge {
z-index: 10;
}
.en {
position: absolute;
top: 0;
right: 0;
transform: rotate(90deg) translate(100%, 100%);
transform-origin: bottom right;
font-size: 50vw;
line-height: 0.7;
letter-spacing: 0.1em;
color: #f1f1f1;
}
.about-list {
position: relative;
z-index: 2;
list-style: none;
margin-bottom: 5%;
}
.about-list .image {
display: flex;
align-items: center;
width: 100%;
margin-right: auto;
margin-bottom: -1em;
}
.about-list .text {
position: relative;
display: block;
width: 82.95%;
margin-left: auto;
padding: 4%;
padding-left: calc(4% + 10px);
padding-right: 10px;
font-size: 1.05em;
}
.about-list .text:before {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 2000px;
height: 100%;
content: "";
border: 1px solid #bbb;
border-left-width: 10px;
border-right-width: 0;
}
.about-list .element {
position: relative;
text-align: center;
width: 35%;
font-size: 20vw;
line-height: 0.9;
color: #333;
}
.about-list .element:before {
position: absolute;
z-index: -1;
bottom: 0;
right: 0;
width: 2000px;
height: 50%;
content: "";
background: #bbb;
}
.about-list .element-copy {
flex: 1;
font-size: 1.8em;
font-weight: 700;
padding-left: 5%;
}
.about-list .element-copy span {
display: block;
}
@media (max-width:1440px) {
.about-list .element-copy {
font-size: 1.6em;
}
.about-list .text {
font-size: 1em;
}
}
@media (max-width:1280px) {
.about-list .element {
width: 30%;
}
.about-list .text {
width: 85.5%;
}
.about-list .element-copy {
font-size: 1.5em;
padding-left: 1em;
}
}
@media (max-width:1024px) {
.about-list {
margin-bottom: 7%;
}
.about-list .image {
flex-direction: column;
}
.about-list .element {
font-size: 24vw;
margin-bottom: 2.5rem;
}
.about-list .element-copy {
width: 100%;
font-size: 1.6em;
padding-left: 10px;
margin-bottom: 1.5em;
}
.about-list .text {
width: calc(100% - 10px);
}
.en {
display: none;
}
}
@media (max-width:768px) {
.about-list {
margin-bottom: 10%;
}
.about-list .element-copy {
font-size: 1.45em;
}
.about-list .text {
padding: 5%;
padding-left: calc(5% + 10px);
padding-right: 10px;
}
}
@media (max-width:640px) {
.about-list .element {
font-size: 28vw;
margin-bottom: 2rem;
}
.about-list .element-copy {
font-size: 1.35em;
}
.about-list .element-copy span {
margin: 0.25em 0;
}
}
@media (max-width:480px) {
.about-list {
margin-bottom: 14%;
}
.about-list .element {
font-size: 30vw;
margin-bottom: 1.5rem;
}
} .project-section {
background-color: #f9f9f9;
}
.section-title {
font-size: 2rem;
margin-bottom: 2rem;
text-align: center;
}
@media (max-width:640px) {
.section-title {
font-size: 1.75rem;
margin-bottom: 1.5rem;
}
}
@media (max-width:480px) {
.section-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}
} .project-card {
display: flex;
flex-direction: row;
margin: 3rem 0;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.3s ease;
}
.project-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.project-image-wrapper {
position: relative;
flex: 1 1 40%;
aspect-ratio: 4 / 3;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: center;
}
.project-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.label-overlay {
position: absolute;
top: 10px;
right: 10px;
background: #000000cc;
color: white;
padding: 0.2em 0.6em;
font-size: 0.85rem;
border-radius: 4px;
font-weight: bold;
}
.placeholder-text {
font-size: 1.2rem;
color: #777;
font-weight: bold;
}
.project-content {
flex: 1 1 60%;
padding: calc(3% + 1em);
}
.project-content h3 {
font-size: 1.4rem;
line-height: 1.6;
margin-bottom: 1.25rem;
border-left: 5px solid #4f46e5;
padding-left: 0.75rem;
font-weight: 600;
color: #1f2937;
}
.project-content p {
margin-bottom: 1rem;
}
.project-content ul {
background-color: #f3f4f6;
border-radius: 8px;
padding: calc(2% + 0.5em);
margin: 1rem 0;
list-style: none;
font-size: 0.95rem;
}
.project-content ul li {
margin: 0.5rem 0;
position: relative;
padding-left: 1.2rem;
}
.project-content ul li::before {
content: "・";
position: absolute;
left: 0;
color: #4f46e5;
font-weight: bold;
}
.project-tags span {
display: inline-block;
background: linear-gradient(to right, #ede9fe, #f3f0ff);
padding: 0.3em 1em;
margin: 0.25em 0;
border-radius: 16px;
font-size: 0.85rem;
color: #4f46e5;
font-weight: 500;
} @media screen and (max-width: 1024px) {
.project-card {
flex-direction: column;
max-width: 800px;
margin: 3rem auto;
}
.project-image-wrapper {
flex: unset;
width: 100%;
aspect-ratio: 16 / 9;
}
}
@media screen and (max-width: 640px) {
.project-content h3 {
font-size: 1.3em;
}
.project-tags span {
font-size: 0.8rem;
}
}
@media screen and (max-width: 480px) {
.project-card {
margin: 2rem 0;
}
.project-content {
padding: 5%;
}
.project-content h3 {
margin-top: 0.5em;
font-size: 1.2em;
margin-bottom: 1rem !important;
}
.project-tags span {
font-size: 0.75rem;
}
} .industry-section {
background-color: #fafafa;
text-align: center;
}
.industry-lead {
line-height: 1.9;
margin-bottom: 2rem;
max-width: 960px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.industry-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-top: 1.5rem;
}
.industry-tags span {
display: inline-block;
background-color: #e0efff;
color: #2255aa;
font-size: 0.98rem;
padding: 0.4rem 1rem;
border-radius: 50px;
font-weight: 500;
}
.overlay-status {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 1.4rem;
letter-spacing: 0.25em;
text-indent: 0.25em;
font-weight: bold;
padding: 0.5em 1em;
border-radius: 8px;
text-align: center;
z-index: 2;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
} @media screen and (max-width: 1080px) {
.industry-lead {
text-align: left;
}
.industry-lead br {
display: none;
}
}
@media (max-width: 768px) {
.industry-section .section-title {
font-size: 1.4rem;
}
.industry-lead {
font-size: 0.95rem;
line-height: 1.8;
}
.industry-tags {
gap: 0.4rem;
}
.industry-tags span {
font-size: 0.85rem;
padding: 0.3rem 0.8rem;
}
.sp-br {
display: block;
}
}
@media (min-width: 769px) {
.sp-br {
display: none;
}
}  .web-solution-content {
padding: 60px 0;
}
.section-title {
font-size: 2.5em;
font-weight: 700;
margin-bottom: 30px;
color: #ffffff;
}
.web-solution-content .section-title {
color: #1F2238;
}
.section-subtitle {
font-size: 1.2em;
line-height: 1.8;
margin-bottom: 20px;
color: #ffffff;
}
.web-solution-content .section-subtitle {
color: #D6D9F2;
}
.section-intro {
font-size: 1em;
line-height: 1.8;
margin-bottom: 60px;
color: #ffffff;
}
.web-solution-content .section-intro {
color: #C1C5E0;
}
.solution-items {
display: flex;
gap: 40px;
justify-content: center;
flex-wrap: wrap;
}
.solution-item {
flex: 1;
min-width: 250px;
max-width: 300px;
text-align: left;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.solution-item.is-visible {
opacity: 1;
transform: translateY(0);
}
.solution-item:nth-child(1).is-visible {
transition-delay: 0.1s;
}
.solution-item:nth-child(2).is-visible {
transition-delay: 0.3s;
}
.solution-item:nth-child(3).is-visible {
transition-delay: 0.5s;
}
.solution-number {
font-size: 3em;
font-weight: 700;
color: rgba(255, 255, 255, 0.25);
margin-bottom: 20px;
line-height: 1;
}
.solution-title {
font-size: 1.1em;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.6;
color: #ffffff;
}
.solution-title span {
display: block;
}
.solution-divider {
width: 100%;
height: 1px;
background-color: #ffffff;
margin: 15px 0 20px 0;
}
.solution-item:first-child .solution-divider {
background-color: #b0b0b0;
}
.solution-item:nth-child(2) .solution-divider {
background-color: #ffffff;
}
.solution-item:nth-child(3) .solution-divider {
background-color: #ffffff;
}
.solution-description {
font-size: 0.95em;
line-height: 1.8;
color: #ffffff;
}
.solution-item:first-child .solution-description {
color: #C3C7E3;
}
.solution-item:nth-child(2) .solution-description {
color: #C3C7E3;
}
.solution-item:nth-child(3) .solution-description {
color: #C3C7E3;
}
.solution-services {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.solution-services-title {
font-size: 0.9em;
font-weight: 700;
color: #ffffff;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.solution-services-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.solution-services-list li {
font-size: 0.85em;
line-height: 1.8;
color: #C3C7E3;
padding-left: 15px;
position: relative;
}
.solution-services-list li::before {
content: "•";
position: absolute;
left: 0;
color: #ffffff;
}
.solution-cta {
display: inline-block;
font-size: 0.85em;
font-weight: 700;
color: #ffffff;
text-decoration: none;
letter-spacing: 0.05em;
transition: opacity 0.3s ease;
}
.solution-cta:hover {
opacity: 0.7;
}
.solution-sub-site {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.solution-sub-site-name {
font-size: 0.85em;
font-weight: 700;
color: #ffffff;
margin-bottom: 5px;
}
.solution-sub-site-description {
font-size: 0.75em;
color: #C3C7E3;
margin: 0;
} .web-concept-section {
padding: 10% 7%;
background: #f9f9f9;
}
.web-concept-content {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.web-concept-title {
font-size: 2.5em;
font-weight: 600;
margin-bottom: 2em;
color: #333;
letter-spacing: 0.1em;
}
.web-concept-text {
font-size: 1.4em;
line-height: 2;
color: #555;
font-weight: 500;
letter-spacing: 0.05em;
margin-bottom: 3em;
}
.web-concept-intro {
font-size: 1.3em;
line-height: 2.2;
color: #333;
font-weight: 500;
letter-spacing: 0.05em;
margin-bottom: 4em;
}
.web-concept-examples {
margin-top: 3em;
display: flex;
gap: 3em;
justify-content: center;
flex-wrap: wrap;
}
.examples-category {
flex: 1;
min-width: 300px;
max-width: 450px;
background: #fff;
border-radius: 8px;
padding: 2.5em 2em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.examples-category::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: #459EA5;
transition: height 0.3s ease;
}
.examples-category:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
.examples-category:hover::before {
height: 6px;
}
.examples-category--01 {
border-color: #FF6B9D;
}
.examples-category--01::before {
background: #FF6B9D;
}
.examples-category--02 {
border-color: #459EA5;
}
.examples-category--02::before {
background: #459EA5;
}
.examples-category--03 {
border-color: #A78BFA;
}
.examples-category--03::before {
background: #A78BFA;
}
.category-badge {
display: inline-block;
font-size: 2.5em;
font-weight: 700;
color: #e8e8e8;
margin-bottom: 1em;
letter-spacing: 0.1em;
}
.category-title {
font-size: 1.3em;
font-weight: 600;
margin-bottom: 1.5em;
color: #333;
border-bottom: 2px solid #459EA5;
padding-bottom: 0.8em;
}
.category-description {
font-size: 0.95em;
line-height: 1.8;
color: #666;
margin-bottom: 2em;
text-align: left;
}
.examples-list {
list-style: none;
text-align: left;
}
.examples-list li {
font-size: 1em;
line-height: 2;
color: #555;
padding-left: 1.8em;
position: relative;
}
.examples-list li::before {
content: "・";
position: absolute;
left: 0;
color: #459EA5;
font-weight: bold;
}
@media (max-width: 768px) {
.web-concept-intro {
font-size: 1.1em;
line-height: 1.9;
margin-bottom: 2.5em;
}
.web-concept-examples {
gap: 2em;
}
.examples-category {
min-width: 100%;
}
.category-title {
font-size: 1.1em;
}
.category-description {
font-size: 0.9em;
line-height: 1.7;
}
.examples-list li {
font-size: 0.95em;
line-height: 1.8;
}
}
@media (max-width: 480px) {
.web-concept-intro {
font-size: 1em;
line-height: 1.8;
margin-bottom: 2em;
}
.category-title {
font-size: 1em;
}
.category-description {
font-size: 0.85em;
}
.examples-list li {
font-size: 0.9em;
line-height: 1.7;
}
}
@media (max-width: 768px) {
.web-concept-section {
padding: 12% 5%;
}
.web-concept-title {
font-size: 1.8em;
margin-bottom: 1.5em;
}
.web-concept-text {
font-size: 1.1em;
line-height: 1.8;
}
}
@media (max-width: 480px) {
.web-concept-section {
padding: 14% 20px;
}
.web-concept-title {
font-size: 1.5em;
margin-bottom: 1.2em;
}
.web-concept-text {
font-size: 1em;
line-height: 1.7;
}
} .business-restructured {
padding: 8% 7%;
background: #ffffff;
}
.business-restructured-container {
max-width: 1000px;
margin: 0 auto;
}
.business-block {
padding: 3em 2.5em;
margin-bottom: 2.5em;
background: #f9f9f9;
border-left: 5px solid #459EA5;
border-radius: 4px;
transition: all 0.3s ease;
}
.business-block:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateX(4px);
}
.business-block:last-child {
margin-bottom: 0;
}
.business-block-header {
margin-bottom: 2em;
}
.business-block-title {
font-size: 1.5em;
font-weight: 600;
color: #333;
margin-bottom: 1em;
letter-spacing: 0.05em;
}
.business-block-description {
font-size: 1.05em;
line-height: 2;
color: #555;
margin: 0;
}
.business-block-services {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2em;
margin: 2.5em 0;
padding: 2em 0;
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
}
.business-block-service {
padding: 1.5em;
background: #ffffff;
border-radius: 4px;
border-left: 3px solid #459EA5;
}
.business-service-title {
font-size: 1.1em;
font-weight: 600;
color: #333;
margin-bottom: 1em;
letter-spacing: 0.05em;
}
.business-service-description {
font-size: 0.95em;
line-height: 1.8;
color: #666;
margin: 0;
}
.business-block-cta {
margin-top: 1.5em;
}
.business-cta-link {
font-size: 1em;
color: #459EA5;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.05em;
display: inline-block;
transition: all 0.3s ease;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
}
.business-cta-link:hover {
border-bottom-color: #459EA5;
transform: translateX(2px);
}
.business-block-unified-cta {
margin-top: 3em;
padding-top: 2.5em;
border-top: 2px solid #e0e0e0;
text-align: center;
}
.business-cta-link-unified {
font-size: 1.15em;
color: #459EA5;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.05em;
display: inline-block;
transition: all 0.3s ease;
padding-bottom: 3px;
border-bottom: 2px solid transparent;
}
.business-cta-link-unified:hover {
border-bottom-color: #459EA5;
transform: translateX(2px);
}
@media (max-width: 768px) {
.business-restructured {
padding: 6% 5%;
}
.business-block {
padding: 2.5em 2em;
margin-bottom: 2em;
}
.business-block-title {
font-size: 1.3em;
}
.business-block-description {
font-size: 1em;
line-height: 1.9;
}
.business-block-services {
grid-template-columns: 1fr;
gap: 1.5em;
margin: 2em 0;
padding: 1.5em 0;
}
.business-service-title {
font-size: 1em;
}
.business-service-description {
font-size: 0.9em;
line-height: 1.7;
}
}
@media (max-width: 480px) {
.business-restructured {
padding: 5% 4%;
}
.business-block {
padding: 2em 1.5em;
margin-bottom: 1.5em;
border-left-width: 4px;
}
.business-block-title {
font-size: 1.15em;
margin-bottom: 0.8em;
}
.business-block-description {
font-size: 0.95em;
line-height: 1.8;
}
.business-block-services {
margin: 1.5em 0;
padding: 1.2em 0;
}
.business-service-title {
font-size: 0.95em;
margin-bottom: 0.8em;
}
.business-service-description {
font-size: 0.85em;
line-height: 1.6;
}
.business-cta-link {
font-size: 0.9em;
}
} .business-lead {
max-width: 900px;
margin: 3em auto;
padding: 2.5em 2em;
background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
border-left: 4px solid #459EA5;
border-radius: 4px;
}
.business-lead p {
font-size: 1.1em;
line-height: 2;
color: #333;
letter-spacing: 0.05em;
margin: 0;
}
@media (max-width: 768px) {
.business-lead {
padding: 2em 1.5em;
margin: 2em auto;
}
.business-lead p {
font-size: 1em;
line-height: 1.9;
}
}
@media (max-width: 480px) {
.business-lead {
padding: 1.5em 1.2em;
margin: 1.5em auto;
}
.business-lead p {
font-size: 0.95em;
line-height: 1.8;
}
} .web-solution-cta {
margin-top: 2.5em;
padding-top: 2em;
border-top: 1px solid #e0e0e0;
text-align: center;
}
.web-solution-cta-link {
font-size: 1em;
color: #459EA5;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.05em;
display: inline-block;
transition: all 0.3s ease;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
}
.web-solution-cta-link:hover {
border-bottom-color: #459EA5;
transform: translateX(2px);
}
@media (max-width: 768px) {
.web-solution-cta {
margin-top: 2em;
padding-top: 1.5em;
}
.web-solution-cta-link {
font-size: 0.95em;
}
}
@media (max-width: 480px) {
.web-solution-cta {
margin-top: 1.5em;
padding-top: 1.2em;
}
.web-solution-cta-link {
font-size: 0.9em;
}
} .footer-cta-section {
padding: 80px 20px;
background: linear-gradient(135deg, rgba(31, 34, 56, 0.6) 0%, rgba(42, 46, 74, 0.6) 100%);
text-align: center;
}
.footer-cta-content {
max-width: 800px;
margin: 0 auto;
}
.footer-cta-intro {
font-family: 'Poppins', sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.8;
letter-spacing: 0.05em;
color: #ffffff;
margin-bottom: 40px;
}
.footer-cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.footer-cta-button {
display: inline-block;
padding: 18px 30px;
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
min-width: 280px;
}
.footer-cta-corporate {
background-color: #5E6287;
color: #ffffff;
border: 2px solid #5E6287;
}
.footer-cta-corporate:hover {
background-color: transparent;
color: #5E6287;
}
.footer-cta-entertainment {
background-color: transparent;
color: #ffffff;
border: 2px solid #ffffff;
}
.footer-cta-entertainment:hover {
background-color: #ffffff;
color: #1F2238;
}
@media (max-width: 768px) {
.footer-cta-section {
padding: 60px 20px;
}
.footer-cta-intro {
font-size: 22px;
margin-bottom: 30px;
}
.footer-cta-button {
min-width: 100%;
padding: 16px 20px;
font-size: 13px;
}
}