@charset "UTF-8";
 :root {
--color-01: #efefef;
--color-02: #3f3f3f;
--color-03: #031128;
--color-04: #315182;
--color-ko: rgba(255, 255, 255, .875);
--border-light: 1px solid rgba(255, 255, 255, .125);
--border-dark: 1px solid rgba(0, 0, 0, .125);
} main {
z-index: 1;
margin-top: 48px;
}
main section,
aside {
padding-top: 4rem;
padding-bottom: 4rem;
}
main ul,
main#success ol,
main#success dl {
padding: 0;
margin: 0;
}
main li {
list-style: none;
}
main nav {
background-color: transparent;
}
main h1 {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.375;
margin-bottom: 2rem;
}
main h2 {
font-size: 2rem;
font-weight: 600;
line-height: 1.375;
margin-bottom: 2rem;
}
main h2 span {
font-size: 1rem;
font-weight: normal;
display: block;
line-height: 1.75;
}
main p,
main li,
main dd {
font-size: 1rem;
}
#success a:hover {
text-decoration: none;
} .aside-block {
border-top: var(--border-dark);
margin-top: 2rem;
padding-top: 2rem;
}
@media (min-width: 768px) {
.aside-block {
margin-top: 0;
border-top: none;
border-left: var(--border-dark);
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
}
} #success header {
padding-top: 2rem;
}
#success header .summary p {
font-size: 1.25rem;
font-weight: 600;
}
img.client-logo {
height: 2rem;
width: auto;
}
@media (min-width: 768px) {
img.client-logo {
height: 2.5rem;
}
}
#success .project-info h2 {
font-size: 1.125rem;
margin-bottom: 1rem;
}
#success .project-info dl {
margin: 1rem 0;
}
#success .project-info dt {
display: inline-block;
text-align: center;
background-color: var(--color-02);
font-size: 0.75rem;
line-height: 1;
color: var(--color-ko);
padding: .375rem;
font-weight: normal;
min-width: 4rem;
} #sec-index {
background-color: var(--color-01);
}
#sec-index ol li {
line-height: 1.375;
margin: 1rem 0;
padding-left: 1rem;
border-left: var(--border-dark);
}
#sec-index ol li span {
display: block;
font-size: .75rem;
color: var(--color-02);
}
.cta-01 li {
margin-bottom: 0.5rem;
text-align: center;
}
.cta-01 li:last-child {
margin-top: 1.5rem;
margin-bottom: 0;
}
.cta-01 a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
}
.cta-01 a .ico {
flex-shrink: 0;
width: 0.875em;
height: 0.875em;
}
@media (min-width: 768px) {
.cta-01 li {
text-align: left;
}
.cta-01 a {
justify-content: flex-start;
}
} #sec-issues {
background-color: var(--color-02);
color: var(--color-ko);
}
.issue-list {
padding: 1rem 0;
}
.issue-list dl:last-child {
margin-top: 4rem !important;
}
.issue-list dt {
font-size: 1.25rem;
}
.issue-list dd {
border-left: var(--border-light);
padding-left: 1rem;
line-height: 1.5;
margin: 1rem 0;
} .solution-list ul {
display: flex;
flex-wrap: wrap;
grid-row-gap: 1rem;
}
.solution-list li {
min-width: 50%;
max-width: 50%;
}
.solution-list li img {
width: 4rem;
height: 4rem;
margin-right: 1rem;
}
@media (min-width: 768px) {
.solution-list li {
min-width: 100%;
max-width: 100%;
}
} #sec-process {
background-color: var(--color-01);
} #sec-achievement {
background-color: var(--color-03);
color: var(--color-ko);
}
.highlight ul {
color: #fff;
}
.highlight li {
padding: 2rem 1rem;
text-align: center;
border-bottom: var(--border-light);
}
.highlight li:last-child {
border: none;
}
.highlight li h3,
.highlight li p {
font-size: 0.875rem;
line-height: 1.375;
margin: 0;
}
.highlight li .key-number {
font-size: 2.25rem !important;
font-weight: 800;
margin: 1.5rem 0;
} #sec-voice {
background-color: var(--color-01);
}
.voice-blk {
background-color: var(--color-ko);
border-radius: 1rem;
padding: 2.5rem;
margin-bottom: 2rem;
}
.voice-blk:last-of-type {
margin-bottom: 0;
}
.voice-blk dt {
font-size: 1rem;
line-height: 1.375;
margin-bottom: 1rem;
}
.voice-blk dt img {
height: 2rem;
width: auto;
margin-bottom: 1rem;
}
.voice-blk dt span {
display: block;
}
.voice-blk dd {
font-size: 1.25rem;
margin: 0;
}
@media (min-width: 768px) {
.voice-blk dt {
min-width: 40%;
padding-right: 2rem;
text-align: center;
margin-bottom: 0;
}
.voice-blk dt span {
margin: 0;
}
} .tags dl {
margin: 0 0 1rem 0;
}
.tags dt {
font-weight: normal;
border-bottom: var(--border-dark);
}
.tags dt button {
all: unset;
display: block;
width: 100%;
cursor: pointer;
padding: .5rem 0;
position: relative;
}
.tags dt button::after {
content: "＋";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.tags dl dd {
font-size: 0.875rem;
max-height: 0;
overflow: hidden;
padding: 0;
margin: 0;
transition: max-height .25s ease, padding .25s ease;
}
.tags dl.is-open dd {
max-height: 1000px;
padding: .5rem 0;
}
.tags dl.is-open dd:first-of-type {
margin-top: 0.5rem;
}
.tags dl.is-open dt button::after {
content: "－";
}
@media (min-width: 768px) {
.tags {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.tags dl dd {
max-height: none !important;
overflow: visible;
padding: .25rem 0 !important;
}
.tags dt {
border-bottom: none;
}
.tags dt button {
cursor: default;
padding: 0 0 .5rem 0;
pointer-events: none;
}
.tags dl.is-open dt button::after,
.tags dt button::after {
content: "" !important;
}
} .tags { position: relative; z-index: 20; }
.bg_img { pointer-events: none !important; }  .hero-image img,
.solution-image img,
.process-image img {
display: block;
max-width: 100%;
height: auto;
} .fade-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.in-view {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.fade-up {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
} .success-list {
--gap-y: 1.25rem;
}
.success-list.row {
margin-top: calc(var(--gap-y) * -0.5);
margin-bottom: calc(var(--gap-y) * -0.5);
}
.success-list.row > li {
padding-top: calc(var(--gap-y) * .5);
padding-bottom: calc(var(--gap-y) * .5);
} .success-list article {
background-color: var(--color-ko, #fff);
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
transition: box-shadow .25s ease;
overflow: hidden;
padding: 1.25rem;
height: 100%;
border-radius: 0; }
.success-list article:hover {
box-shadow: 0 18px 46px rgba(0, 0, 0, .20);
} .success-list article .stretched-link {
position: absolute;
inset: 0;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
} .success-list article img {
display: block;
width: calc(100% + 2.5rem);
max-width: none;
margin: -1.25rem -1.25rem 0;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center center;
transition: transform .4s ease, filter .3s ease;
}
.success-list article:hover img {
transform: scale(1.08);
filter: brightness(60%);
} .success-list article .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
color: #fff;
font-size: 0.875rem;
transition: opacity .3s ease;
z-index: 2;
}
.success-list article .overlay span {
color: #fff;
border: 1px solid #fff;
padding: 0.5rem 1.25rem;
font-weight: normal;
text-decoration: none;
border-radius: 9999px;
}
.success-list article:hover .overlay {
opacity: 1;
} .success-list h2,.success-list p,.success-list li {
color: #222;
}
.success-list h2 {
font-size: 1rem;
font-weight: 600;
line-height: 1.375em;
margin: 1rem 0 0 0;
}
.success-list h2 span {
display: block;
font-size: 0.875rem;
font-weight: 500;
}
.success-list article p {
font-size: 0.875rem;
line-height: 1.5em;
margin: 1rem 0;
}
.success-list article ul {
margin: 0;
list-style: none;
padding: 0;
margin-top: auto;
}
.success-list article ul li {
font-size: 0.75rem;
line-height: 1.375em;
opacity: .875;
} @media (min-width: 768px) {
.success-list > li {
display: flex;
}
.success-list > li > article {
flex: 1;
}
} #content-wrapper #page-content .breadcrumb-area.on {
top: 57px !important;
}
#content-wrapper #page-content .breadcrumb-area {
position: relative;
max-width: 100%;
white-space: nowrap; overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
} #content-wrapper #page-content .breadcrumb-area::-webkit-scrollbar {
height: 6px;
} #content-wrapper #page-content .breadcrumb-area br {
display: none;
}