@charset "utf-8"; /* ---------------------------------------------
navigation02 ※TOP、下層共通
--------------------------------------------- */
/* ---------------------------------------------
Issue Section 画像切り替えアニメーション
--------------------------------------------- */
.issue-lead__img {
    position: relative;
}

.issue-lead__img .js-issue-img {
    transition: opacity 0.8s ease-in-out;
    display: block;
}

.issue-lead__img .js-issue-img:first-child {
    position: relative;
    opacity: 1;
}

.issue-lead__img .js-issue-img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.issue-lead__img .js-issue-img.is-active {
    opacity: 1 !important;
    z-index: 1;
}

.issue-lead__img .js-issue-img:not(.is-active) {
    opacity: 0;
    z-index: 1;
}

.text-link {
    margin: 0;
    padding: 1rem 2rem 1rem 0;
    background: url("img/arrow-01-black-right.svg") no-repeat center right / auto 1em;
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    text-decoration: underline;
    color: #333;
}

.navigation01-menu li a {
    padding: 1.3rem 1.5rem 1.2rem;
    font-weight: 700;
    font-size: 1.5rem;
    color: #333000;
    /* mix-blend-mode: difference; */
    /* filter: drop-shadow(0 0 1px rgba(255,255,255,0.1)); */
    transition: all .4s ease;
}

.navigation01-menu li a:hover {
    background-color: var(--site-color02);
    color: #333;
    mix-blend-mode: normal;
    opacity: 1;
}

/* ---------------------------------------------
Animations（MV表示アニメーションは削除済み・要再構築）
--------------------------------------------- */
/* ---------------------------------------------
TOP Header Bar
--------------------------------------------- */
header.header-area.header-area--top {
    position: absolute;
    z-index: 4;
    right: 0;
}

.top-header-bar__inner {
    /* max-width: 120rem; */
    margin: 0 auto;
    padding: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 1.1rem;
    color: #666;
    flex-direction: column;
    align-content: flex-end;
    gap: 0.3rem;
}

.top-header-bar__left {
    font-weight: 400;
    font-size: 1em;
}

/* ---------------------------------------------
TOP Navigation Bar (Removed - Moved to navigation01-menu-area)
--------------------------------------------- */
/* 
.top-nav-bar { ... }
*/
.header-area-upper {
    padding: var(--s1);
    text-align: right;
}

.header-title a:hover {
    text-decoration: underline;
}

.gnavi-btn-close {
    display: none;
}

.toggle-content {
    display: none;
}

.gnavi-ctrl {
    transition: opacity 0.6s, visibility 0.6s;
    opacity: 1;
    visibility: visible;
    display: block !important;
}

.navigation01-menu-area {
    position: fixed;
    top: 45px;
    right: 0;
    z-index: 1000;
    /* background-color: var(--color-white); */
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    background-color: transparent;
}

.gnavi-ctrl.is-show {
    opacity: 1;
    visibility: visible;
}

#low-header .gnavi-ctrl {
    opacity: 1;
    visibility: visible;
}

.gnavi-btn {
    width: var(--s7);
    height: var(--s6);
    background: #333;
    display: block;
    position: relative;
    /* top: var(--s3); */
    right: 0;
    z-index: 200;
    cursor: pointer;
}

.gnavi-btn span {
    width: var(--s4);
    height: 0.2rem;
    display: inline-block;
    background: #fff;
    position: absolute;
    left: 1.2rem;
    transform: translate(0, -50%);
    transition: transform 0.4s, opacity 0.4s;
}

.gnavi-btn span:nth-of-type(1) {
    top: 1.7rem;
}

.gnavi-btn span:nth-of-type(2) {
    top: 2.4rem;
}

.gnavi-btn span:nth-of-type(3) {
    top: 3.1rem;
}

.gnavi-btn.is-active span:nth-of-type(1) {
    transform: translateY(0.7rem) rotate(-45deg);
}

.gnavi-btn.is-active span:nth-of-type(2) {
    opacity: 0;
}

.gnavi-btn.is-active span:nth-of-type(3) {
    transform: translateY(-0.7rem) rotate(45deg);
}

.gnavi-btn-close {
    width: 80%;
    margin: 0 auto;
    padding: var(--s2);
    background: #333;
    display: block;
    text-align: center;
    display: none;
}

.gnavi-btn-close__inner {
    padding: 0 0 0 var(--s3);
    display: inline-block;
    color: #fff;
    font-weight: 700;
    position: relative;
}

.gnavi-btn-close__inner::before {
    content: "";
    width: 1em;
    height: 0.2rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%) rotate(45deg);
}

.gnavi-btn-close__inner::after {
    content: "";
    width: 1em;
    height: 0.2rem;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%) rotate(135deg);
}

.gnavi-area {
    width: 100%;
    max-width: 69.2rem;
    height: 75vh;
    padding: 2rem var(--s1) var(--s10);
    display: block;
    background: #F5F5F5;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 84px;
    right: 0;
    z-index: 99;
    transform: translateX(100%);
    transition: transform 0.8s ease, opacity 0.8s ease;
    opacity: 0;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
}

.gnavi-title {
    min-height: var(--s6);
    margin: 0 var(--s8);
    /* display: flex; */
    /* align-items: center; */
    justify-content: center;
    /* font-size: 1.6rem; */
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    display: none;
}

.gnavi-pc {
    display: none;
}

.gnavi-list {
    /* border-bottom: 1px solid #333; */
    position: relative;
}

.gnavi-list li {
    padding-left: 0;
}

.gnavi-list__item::before {
    display: none;
}

.gnavi-list__link {
    width: 100%;
    margin: 0 auto;
    padding: var(--s2) var(--s4) var(--s1) var(--s2);
    /* border-top: 1px solid #333; */
    display: block;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    position: relative;
    font-size: 1.4rem;
}

.gnavi-list__link::after {
    content: "";
    width: 1.4rem;
    height: 1.4rem;
    background: url("img/arrow-01-black-right.svg") no-repeat center/60% auto;
    position: absolute;
    top: 50%;
    right: var(--s2);
    transform: translate(0, -50%) rotate(0);
    transition: transform 0.3s;
}

.gnavi-list__link--toggle::after {
    background-image: url("img/arrow-01-black-down.svg");
    background-size: 100% auto;
}

.gnavi-list__link--toggle.is-open::after {
    transform: translate(0, -50%) rotate(180deg);
}

.gnavi-list__sub {
    width: 100%;
    padding-bottom: 1rem;
}

.gnavi-list__sub .gnavi-list__link {
    width: 100%;
    margin: 0 auto;
    padding: 5px var(--s1) 5px var(--s4);
    /* border-top: 1px solid #333; */
    display: block;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    position: relative;
}

.gnavi-list__low .gnavi-list__link {
    padding: var(--s2) var(--s4) var(--s2) var(--s4);
}

.gnavi-list__low .gnavi-list__link::after {
    content: "└";
    background: none;
    transform: translateY(-50%);
    position: absolute;
    top: 40%;
    left: 1rem;
}

.is-gnavi-open .gnavi-area {
    opacity: 1;
    transform: translateX(0);
}

/* ---------------------------------------------
index01(目次)
--------------------------------------------- */
.onb-index01-frame {
    width: 100%;
    background-color: var(--site-color09);
}

.onb-index01-wrap {
    margin: 0 auto;
    padding: var(--s1);
    /* border: solid 0.1rem #D0D3E0; */
    background-color: transparent;
    position: relative;
}

.onb-index01-title {
    padding: var(--s1);
    color: #333;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1;
    /* background: url("img/dummy-icon.png") no-repeat left center; */
    background-size: 4rem auto;
    position: relative;
    cursor: pointer;
}

.onb-index01-title::before {
    content: "";
    width: 1.6rem;
    height: 0.1rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translate(0, -50%);
}

.onb-index01-title::after {
    content: "";
    width: 0.1rem;
    height: 1.6rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: 2.8rem;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}

.onb-index01-title.is-open::after {
    transform: translate(0, -50%) rotate(270deg);
}

.onb-index01-chapter {
    padding: var(--s2);
    font-weight: 700;
    gap: var(--s1);
}

.onb-index01-chapter-h {
    margin: 0 0 0 var(--s2);
    font-size: 85%;
    line-height: 1.7;
    position: relative;
}

.onb-index01-chapter-h a {
    display: block;
    text-decoration: none;
}

.onb-index01-chapter-h a:hover {
    opacity: .6;
}

.onb-index01-chapter-h-two {
    margin-left: var(--s2);
    position: relative;
}

.onb-index01-chapter-h-three {
    margin-left: var(--s4);
    position: relative;
}

.onb-index01-chapter-h-two::before, .onb-index01-chapter-h-three::before {
    position: absolute;
    top: 0;
    left: -1.5em;
}

.onb-index01-chapter-h-two::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 2rem;
    background-color: #30bec7;
    transform: translateY(-50%);
    top: .8em;
}

.onb-index01-chapter-h-three::before {
    content: "└";
}

.more-content {
    display: none;
}

.onb-index01-content {
    /* background-color: #fff; */
}

/* ---------------------------------------------
related-article01(関連記事)
--------------------------------------------- */
.related-article01-frame {
    border: 1px solid var(--site-color09);
    margin: var(--s6) auto;
    padding: var(--s1) var(--s3) var(--s4) var(--s3);
    background: #f7f7f7;
    position: relative;
}

.related-article01-title {
    padding: var(--s2) var(--s2) var(--s3) var(--s2);
    color: #333;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1;
    /* background: url("img/dummy-icon.png") no-repeat left center; */
    background-size: 5rem auto;
    position: relative;
    border-bottom: 1px solid #333;
}

.related-article01-list {
    padding: 0;
    font-weight: 700;
    font-size: 85%;
}

.related-article01-list li {
    margin: 0 0 0 var(--s2);
    padding-left: 1.5em;
    font-size: 100%;
    line-height: 1.7;
    position: relative;
}

.related-article01-list li + li {
    margin-top: 10px;
}

.related-article01-list li::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: #30bec7;
    position: absolute;
    top: .6rem;
    left: 0;
}

.related-article01-list a {
    display: block;
    text-decoration: none;
}

.related-article01-list a:hover {
    opacity: 0.6;
}

.relations-box.relations-box--column {
    display: flex;
    gap: 10px;
}

.relations-box__pic {
    flex: 0 0 150px;
}

.is-hidden {
    display: none;
}

.related-article01-more {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 50%);
    background-color: transparent;
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: -40px;
    left: 0;
    padding: 2rem 0;
}

.related-article01-more.is-closed {
    display: none;
}

.related-article01-btn {
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 100px;
    padding: 1rem 5rem 1rem 2rem;
    position: relative;
}

.related-article01-btn::before {
    content: "";
    width: 1.8rem;
    height: .2rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translate(0, -50%);
}

.related-article01-btn::after {
    content: "";
    width: .2rem;
    height: 1.8rem;
    background: #333;
    position: absolute;
    top: 50%;
    right: 2.3rem;
    transform: translate(0, -50%);
    transition: transform 0.3s;
}

.related-article01-btn:hover {
    opacity: 0.6;
}

/*------------------------------------------------------------
    SP settings
*/
@media screen and (max-width: 767px) {
    .related-article01-list {
        padding: 0;
    }

    .related-article01-list li {
        margin-left: 0;
    }

    .relations-box__pic {
        flex: 0 0 100px;
    }
}

/* ------------------------------------------------------------
    top hero / sections
------------------------------------------------------------ */
.top-hero {
    position: relative;
    min-height: 80vh;
    background: var(--color-white);
    /* overflow: hidden; */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.top-hero__inner {
    /* max-width: 120rem; */
    margin: 0 auto;
    padding: 0 0 67.5vw;
    position: relative;
    height: 100%;
    min-height: 80vh;
}

.top-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    contain: layout paint;
}

.top-hero__bg-scroll {
    display: flex;
    width: 200%;
    animation: scroll-right-to-left 60s linear infinite;
}

.top-hero__bg-scroll img {
    width: 50%;
    height: auto;
    flex-shrink: 0;
}

@keyframes scroll-right-to-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.top-hero__dec02 {
    position: fixed;
    top: 15rem;
    left: 60%;
    transform: translate(-50%, -50%) translate3d(0, var(--parallax-offset, 0px), 0);
    width: 115vw;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
    visibility: visible;
}

.top-hero__dec02.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) translate3d(0, calc(var(--parallax-offset, 0px) + 10px), 0);
}

.top-hero__dec02 img {
    width: 100%;
    height: auto;
    position: absolute;
}

.top-hero__dec03 {
    position: absolute;
    right: 0;
    bottom: -3rem;
    width: 21rem;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(0, var(--parallax-offset, 0px), 0);
}

.top-hero__dec03 img {
    width: 100%;
    height: auto;
}

.top-hero__content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s1);
    align-items: start;
    z-index: 2;
    padding-top: 8vw;
    margin-left: 5vw;
    -webkit-font-smoothing: antialiased;
    contain: layout style;
}

.top-hero__main {
    position: relative;
    -webkit-font-smoothing: antialiased;
}

[data-parallax] {
    --parallax-offset: 0px;
    will-change: transform;
}

.top-hero__lead {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    justify-content: flex-start;
}

.top-hero__label-top {
    font-size: 2.5vw;
    font-weight: 700;
    color: #333;
    margin-bottom: var(--s1);
    text-align: left;
    margin-right: 0;
}

.top-hero__label-top span {
    background: #e9f100;
    color: #333;
    padding: 0 1rem;
}

.top-hero__title {
    font-size: 8vw;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.1;
    text-align: left;
    z-index: 5;
    position: relative;
    color: #333;
    -webkit-text-stroke-width: 3px;
    -webkit-font-smoothing: antialiased;
}

.mask-line {
    display: block;
    overflow: hidden;
    position: relative;
}

.mask-line span {
    display: block;
    position: relative;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.top-hero__title.is-active .mask-line span {
    animation: mv-reveal-left-to-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes mv-reveal-left-to-right {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

.top-hero__title .mask-line:nth-child(1) span {
    animation-delay: 0s;
    margin-bottom: 0.5rem;
}

.top-hero__title .mask-line:nth-child(2) span {
    animation-delay: 0.45s;
}

.top-hero__title .mask-line:nth-child(3) span {
    animation-delay: 0.9s;
    margin-top: 0.9rem;
}

.top-hero__title .mask-line span span.strong {
    display: inline-block;
    background: linear-gradient( 315deg, #321970 0%, #326598 70%, #30c6cb 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 0.5rem 2rem;
}

.top-hero__title .hero-suffix {
    display: inline-block;
}

.top-hero__side {
    position: relative;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-weight: 700;
    letter-spacing: 0;
    color: #333;
    font-size: 2.5vw;
    padding-right: 0;
}

.top-hero__side-text {
    display: inline-block;
    margin-top: 0;
}

/* .pr-text … MV表示アニメーション削除済み：常時表示（必要ならスタイルを追加） */
.top-hero__gradient {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, rgba(24, 230, 255, 0.3) 0%, rgba(100, 150, 255, 0.5) 50%, rgba(150, 100, 255, 0.4) 100%);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 1;
}

.top-hero__scroll {
    position: absolute;
    right: 0;
    bottom: -9vw;
    writing-mode: vertical-rl;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #333000;
    z-index: 3;
    padding-right: 9vw;
    text-align: end;
    display: none;
}

.top-hero__scroll::after {
    content: "";
    width: 0.3rem;
    height: 37.2vw;
    display: block;
    background: #333;
}

/* ------------------------------------------------------------
    .mainvisual.mv-category top hero / sections
------------------------------------------------------------ */
.mainvisual.mv-category .top-hero {
    min-height: auto;
}

.mainvisual.mv-category .top-hero__inner {
    padding: 0;
    position: relative;
    height: auto;
    min-height: auto;
}

.mainvisual.mv-category .top-hero__bg-scroll {
    width: 130%;
    animation: scroll-right-to-left 60s linear infinite;
}

.mainvisual.mv-category .top-hero__dec02 img {
    width: 100%;
    height: auto;
    position: absolute;
}

.mainvisual.mv-category .top-hero__content {
    padding-top: 10vw;
    margin-left: 0;
}

.mainvisual.mv-category .top-hero__main {
    position: relative;
}

.slash-lines {
    position: absolute;
    left: -4rem;
    bottom: -3rem;
    width: 10rem;
    height: 10rem;
}

.slash-lines span {
    display: block;
    width: 10rem;
    height: 0.8rem;
    background: linear-gradient(90deg, var(--color-cyan), #6bf3ff);
    transform: skewX(-30deg);
    margin-bottom: 1rem;
}

.section-block {
    position: relative;
    padding: var(--s10) 0;
}

.section-block--dark {
    background: var(--color-midnight);
    color: #fff;
}

.section-block__inner {
    max-width: 158rem;
    margin: 0 auto;
    /* padding: 0 var(--s4); */
}

.section-title {
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1.2;
}

.section-title small {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
    color: #687086;
}

.section-title--accent {
    position: relative;
    padding-bottom: var(--s2);
}

.story-grid {
    margin-top: var(--s5);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s4);
}

.story-card {
    padding: var(--s4);
    background: #fff;
    border: 1px solid #dde3ee;
    box-shadow: 0 1.5rem 3rem rgba(5, 10, 20, 0.08);
}

.story-card__num {
    font-size: 2.4rem;
    font-weight: 900;
    color: var(--color-cyan);
}

.story-card__title {
    font-weight: 700;
    font-size: 1.8rem;
    margin-top: var(--s2);
    line-height: 1.4;
}

.story-card__text {
    margin-top: var(--s2);
    line-height: 1.8;
}

.evidence-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s5);
    align-items: center;
    margin-top: var(--s6);
}

.evidence-panel {
    background: #fff;
    padding: var(--s4);
    border: 1px solid #dbe2ee;
}

.evidence-panel__caption {
    font-size: 1.2rem;
    color: #5b6476;
    margin-top: var(--s2);
}

.evidence-list {
    display: grid;
    gap: var(--s2);
}

.evidence-item {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 1rem 1.4rem;
    background: #0f1728;
    color: #fff;
    border-radius: 4px;
}

.evidence-item__tag {
    background: var(--color-cyan);
    color: #333;
    padding: 0.4rem 0.8rem;
    font-weight: 700;
}

.case-grid {
    margin-top: var(--s5);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
}

.case-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border: 1px solid #dbe2ee;
}

.case-card__media {
    position: relative;
    overflow: hidden;
}

.case-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-card__body {
    padding: var(--s3);
}

.case-card__label {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--color-cyan);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: var(--s2);
}

.case-card__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
}

.cta-panel {
    margin-top: var(--s6);
    padding: var(--s5);
    background: linear-gradient(135deg, #0b1324 0%, #0f3a5f 100%);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s4);
    align-items: center;
}

.cta-panel__title {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.4;
}

.cta-panel__btn {
    padding: 1.4rem 3rem;
    background: var(--color-cyan);
    color: #333;
    text-decoration: none;
    font-weight: 700;
    border-radius: 100px;
}

.floating-banner {
    position: sticky;
    top: 8rem;
    background: #111827;
    color: #fff;
    padding: var(--s3);
    border-left: 4px solid var(--color-cyan);
}

.mainvisual--low {
    position: relative;
    overflow: hidden;
}

.mainvisual--low::after {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -8rem;
    width: 28rem;
    height: 28rem;
    background: linear-gradient(135deg, transparent 55%, rgba(24, 230, 255, 0.2) 55% 65%, transparent 65% 100%);
    transform: rotate(-10deg);
    pointer-events: none;
}

#low-page h1:not([class])::before, #low-page h1:not([class])::after {
    display: none;
}

.onb-index01-frame {
    border-color: #dfe7f2;
    background-color: #f7f9fc;
    width: 75%;
    margin: 0 auto 5rem;
}

.onb-index01-title {
    /* background-color: #fff; */
}

.onb-index01-title::before, .onb-index01-title::after {
    /* background: var(--color-cyan); */
}

/* ------------------------------------------------------------
    sp settings
------------------------------------------------------------ */
@media screen and (max-width: 767px) {
    .top-header-bar__inner {
        padding: 0.6rem var(--s2);
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .top-nav-bar__inner {
        padding: 0 var(--s2);
        flex-wrap: wrap;
        gap: var(--s1);
    }

    .top-nav-bar__link {
        padding: 0.8rem 1.2rem;
        font-size: 1.2rem;
    }

    .top-hero {
        min-height: auto;
    }

    .top-hero__inner {
        padding: var(--s4) var(--s2);
        min-height: auto;
    }

    .top-hero__bg {
        font-size: 8rem;
        top: 0;
    }

    .top-hero__content {
        grid-template-columns: 1fr;
        gap: var(--s4);
        padding-top: var(--s6);
        margin-left: 0;
    }

    .top-hero__title {
        font-size: 12.5vw;
        -webkit-text-stroke-width: thin;
    }

    .top-hero__label-top {
        font-size: 5vw;
        text-align: left;
        margin-bottom: var(--s2);
    }

    .top-hero__side {
        writing-mode: horizontal-tb;
        letter-spacing: 0.1em;
        font-size: 5vw;
        padding-right: 0;
        padding-top: var(--s2);
    }

    .top-hero__gradient {
        width: 100%;
        clip-path: polygon(0% 80%, 100% 60%, 100% 100%, 0% 100%);
    }

    .top-hero__scroll {
        right: var(--s1);
        bottom: var(--s3);
        font-size: 1rem;
    }

    .story-grid, .case-grid {
        grid-template-columns: 1fr;
    }

    .evidence-grid {
        grid-template-columns: 1fr;
    }

    .case-card {
        grid-template-columns: 1fr;
    }

    .cta-panel {
        grid-template-columns: 1fr;
    }

    #low-page h1:not([class]) {
        font-size: 7vw;
        padding: var(--s2) var(--s3);
        margin: 3rem auto 1rem;
        border-left-width: 0.6rem;
    }
}

/* ---------------------------------------------
Issue Section
--------------------------------------------- */
#issue {
    margin-block: -65vw 15rem; z-index: 2;
    background: transparent;
    position: relative;
    padding: var(--s3) 0 var(--s10);
}

.issue-lead {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    /* position: relative; */
}

.issue-lead__media {
    flex: 0 0 45%;
    position: absolute;
    left: 0;
    top: 3rem;
}

.issue-lead__img img {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    object-fit: cover;
    height: 55rem;
    width: 48vw;
}

.issue-lead__dec {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35%;
    z-index: 1;
    transform: translate3d(0, var(--parallax-offset, 0px), 0);
}

.issue-lead__body {
    flex: 1;
    display: flex;
    gap: var(--s3);
    /* padding-top: var(--s10); */
}

.issue-lead__text {
    flex: 1;
    font-size: 2rem;
    line-height: 1.5;
    font-weight: 700;
    text-align: right;
    background: linear-gradient( 315deg, #321970 0%, #326598 70%, #30c6cb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.issue-lead__text p + p {
    margin-top: var(--s4);
    text-align: right;
}

.issue-lead__sub {
    font-size: 1.2rem;
    color: inherit;
    text-align: right;
    margin-top: var(--s2);
    font-weight: 400;
    opacity: 0.6;
}

.issue-lead__banner {
    flex: 0 0 18rem;
    background: linear-gradient(135deg, #330867 0%, #30cfd0 100%);
    color: #fff;
    padding: var(--s3) var(--s2);
    text-align: center;
    position: relative;
}

.issue-lead__banner a {
    color: inherit;
    text-decoration: none;
}

.issue-lead__banner p {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: var(--s4);
}

.issue-lead__banner h3 {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.2;
}

.issue-lead__banner-click {
    margin-top: var(--s4);
    display: inline-block;
    padding: 0.4rem 2rem;
    background: #fff;
    color: #30cfd0;
    border-radius: 100px;
    font-weight: 900;
}

.issue-graph {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    align-items: start;
    position: relative;
    margin: 0 6vw;
    margin-top: 17%;
}

.issue-graph::before {
    content: "日本と米国のDX成果実感の差";
    font-size: 3rem;
    border-left: 8px solid #333;
    font-weight: 700;
    position: absolute;
    padding-left: 0.5rem;
    top: -6rem;
    left: 4rem;
    line-height: 1.2;
}

.issue-graph__img img {
    width: 100%;
    height: auto;
}

.issue-graph__chart {
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    font-size: clamp(12px, 1.4vw, 16px);
    color: #333;
}

.graph-scale {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 8px;
    margin-right: 170px;
    display: none;
}

.graph-rows {
    display: grid;
    gap: 10px;
}

.graph-row {
}

.graph-row:last-child {
    /* color: #326598; */
}

.graph-label {
}

.graph-row {
    display: grid;
    /* 【変更】列の幅を左右逆にします： 左をグラフ(3.5fr)、右をラベル(minmax)に */
    grid-template-columns: 3.5fr minmax(140px, 1fr);
    align-items: center;
    /* gap: 12px; */
    /* color: #cf2e2e; */
}

.graph-label {
    font-weight: 700;
    white-space: nowrap;
    font-size: 1.8rem;
    display: grid;
    /* 【追加】順番を2番目（右側）に指定 */
    order: 2;
    margin-left: 2rem;
}

.graph-bar {
    position: relative;
    display: flex;
    height: 50px;
    border-radius: 2px;
    overflow: hidden;
    background: #f5f5f5;
}

.graph-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient( to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 20% );
    pointer-events: none;
}

.segment {
    width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: width 1s ease;
    transition-delay: var(--delay);
    position: relative;
    padding: 2rem;
}

.graph-label span {
    color: #9c9c9c;
}

span.segment-value span {
    font-size: 0.65em;
}

span.segment-country {
    padding-right: 1rem;
}

.segment.seg1 span.segment-value {
    color: #000;
}

.segment-value {
    font-weight: 700;
    color: #b9b9b9;
    font-size: 1.45em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.seg1 {
    background: #30cccf;
}

.seg2 {
    background: #b9b9b9;
}

.seg3 {
    background: #b9b9b9;
}

.graph-row:last-child .graph-bar {
    height: 70px;
}

.segment.seg1.usa {
    background: #e9f100;
}

.js-graph-animate .graph-row .seg1 {
    width: 0;
}

.js-graph-animate .graph-row .seg2 {
    width: 0;
}

.js-graph-animate .graph-row .seg3 {
    width: 0;
}

.js-graph-animate.is-inview .graph-row .seg1 {
    width: calc(var(--s1) * 1%);
}

.js-graph-animate.is-inview .graph-row .seg2 {
    width: calc(var(--s2) * 1%);
}

.js-graph-animate.is-inview .graph-row .seg3 {
    width: calc(var(--s3) * 1%);
}

.js-graph-animate.is-inview .segment-value {
    opacity: 1;
    transition-delay: calc(var(--delay) + 0.4s);
}

.graph-legend {
    display: flex;
    gap: 45px;
    margin-block: 10px; font-weight: 700;
    margin-left: -1rem;
    justify-content: center;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-swatch {
    width: 50px;
    height: 12px;
    display: inline-block;
}

.legend-swatch.seg1 {
    background: #e9f100;
}

.legend-swatch.seg2 {
    background: #30cccf;
}

.legend-swatch.seg3 {
    background: #9c9c9c;
}

@media (max-width: 768px) {
    .graph-row {
        grid-template-columns: 1fr;
    }

    .graph-label {
        white-space: normal;
        padding-bottom: 0.5rem;
        margin-left: 0;
        margin-top: 0.5rem;
        display: flex;
        font-size: 1.2rem;
    }

    .segment-value {
        font-size: 3.8vw;
    }
}

.issue-graph__content {
    font-size: 1.8rem;
    line-height: 1.8;
    font-weight: 500;
    /* padding-top: 3rem; */
    /* text-align: right; */
}

.issue-graph__content__catch {
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 700;
    /* text-align: right; */
    margin-block: 0 2rem; position: relative;
    padding: 0 0 1rem;
    color: #333;
    /* border-bottom: 1px solid #333; */
}

.issue-graph__content__catch::after {
    content: "";
    position: absolute;
    left: 0;
    right: -10vw;
    bottom: 0;
    border-bottom: 4px solid #333;
}

.issue-graph__divider {
    height: 1px;
    background: #333;
    margin: var(--s4) 0;
    border-top: 1px dotted #ccc;
}

/* SP調整 (Issue Section) */
@media screen and (max-width: 767px) {
    .issue-lead, .issue-lead__body, .issue-graph {
        flex-direction: column;
        display: block;
        position: relative;
        margin: 0;

    }

.issue-graph {

        margin-top: 17%;
    }

    
    .issue-graph__img {
        margin-top: 3rem;
    }

    .issue-lead__media, .issue-lead__banner {
        width: 100%;
    }

    .issue-lead__text p {
        text-align: left !important;
        font-size: 4vw;
        line-height: 1.5;
    }

    .issue-graph::before {
        font-size: 4.5vw;
        position: relative;
        top: 0;
        left: 0;
    }
}

/* ---------------------------------------------
Supervision Section (監修者パーツ)
--------------------------------------------- */
#method.section-supervision {
    padding: 0 0 var(--s10);
    /* background: #fff; */
    position: relative;
    margin-top: 5rem;
    margin-bottom: 10rem;
    z-index: 2;
}

#method .section-block__inner {
    max-width: none;
    margin: 0 6vw;
    /* padding: 0 var(--s4); */
    position: relative;
}

#method-dx-lead .section-block__inner {
    max-width: none;
    margin: 0 6vw;
    position: relative;
}

.supervision-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    min-height: 60rem;
    /* position: relative; */
    overflow: hidden;
    background: linear-gradient( 315deg, #321970 0%, #326598 70%, #30c6cb 100%);
}

/* 左側: ビジュアルエリア */
.supervision-visual {
    /* position: relative; */
    padding: var(--s6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.supervision-visual__bg {
    transform: translate3d(0, var(--parallax-offset, 0px), 0);
}

.supervision-visual::after {
    content: "";
    position: absolute;
    top: 73%;
    left: 2rem;
    width: 25%;
    /* max-height: 24rem; */
    aspect-ratio: 5 / 3;
    background: url("img/case_obi.jpg") no-repeat center / cover;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.supervision-images {
    /* position: relative; */
    z-index: 2;
    /* width: 100%; */
    /* height: 100%; */
    min-height: 50rem;
}

.supervision-images::before {
    content: "";
    position: absolute;
    top: -5%;
    left: -5.5%;
    width: 30%;
    max-height: 25rem;
    aspect-ratio: 5 / 3;
    background: url("img/case_walmart.jpg") no-repeat center / cover;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.supervision-images::after {
    content: "";
    position: absolute;
    top: 30%;
    left: -8%;
    width: 40%;
    max-height: 50rem;
    aspect-ratio: 6 / 3;
    background: url("img/case_seven.jpg") no-repeat center / cover;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* 右側: コンテンツエリア */
.supervision-content {
    position: relative;
    padding: var(--s8) var(--s10) var(--s8) var(--s6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#method .section-block__inner::after {
    content: "";
    position: absolute;
    top: 0;
    right: -3.5rem;
    width: 5rem;
    height: 25rem;
    background: url("img/sponsored-en.svg") no-repeat center / contain;
    z-index: 10;
    pointer-events: none;
}

.supervision-content__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    opacity: 0.95;
    z-index: 1;
}

.supervision-content__inner {
    position: relative;
    z-index: 2;
    color: #fff;
}

.supervision-title {
    margin-bottom: var(--s5);
}

.supervision-title__lead {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: var(--s2);
    opacity: 0.95;
    background: #fff;
    padding: 1rem;
    width: 40rem;
}

.supervision-title__main {
    display: block;
    font-size: 4rem;
    font-weight: 900;
    color: #ecf300;
    line-height: 1.2;
}

.supervision-title__main::before {
    content: "監修：";
    font-size: 2.5rem;
    font-weight: 700;
    /* padding-right: 0.5rem; */
}

.supervision-text {
    margin-bottom: var(--s3);
}

.supervision-text__item {
    font-size: 2rem;
    FONT-WEIGHT: 700;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 0;
    margin-top: 0;
}

.supervision-desc {
    font-size: 1.8rem;
    line-height: 1.5;
    color: #fff;
    margin-bottom: var(--s4);
}

.supervision-buttons {
    display: flex;
    gap: var(--s3);
    margin-top: var(--s6);
}

.supervision-buttons .btn-internal a {
    background: url(img/arrow-btn-01-wht-down.svg) no-repeat bottom 2rem center / auto 1.5em, linear-gradient(315deg, #321970 0%, #326598 70%, #06888d 100%);
    border: 1px solid #fff;
}

.supervision-buttons .btn-web, .supervision-buttons .btn-internal {
    margin-top: 0;
    margin-bottom: 0;
}

.supervision-btn {
    display: inline-block;
    padding: var(--s3) var(--s6);
    border-radius: 0.6rem;
    text-align: center;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

.supervision-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.2);
}

.supervision-btn--primary {
    background: #ffd700;
    color: #333;
}

.supervision-btn--primary::after {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #333;
    margin-left: var(--s2);
    vertical-align: middle;
}

.supervision-btn--secondary {
    background: #87ceeb;
    color: #333;
}

.supervision-btn--secondary::after {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #fff;
    margin-left: var(--s2);
    vertical-align: middle;
}

.supervision-source {
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--s2);
}

.supervision-source a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
}

.supervision-sponsored {
    position: absolute;
    right: var(--s2);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    opacity: 0.8;
    pointer-events: none;
}

.supervision-sponsored img {
    display: block;
    height: auto;
    max-height: 80vh;
    width: auto;
}

/* SP調整 (Supervision Section) */
@media screen and (max-width: 767px) {
    .supervision-wrapper {
        grid-template-columns: 1fr;
        min-height: auto;
        display: block;
    }

    .supervision-visual {
        /* display: none; */
        height: 20rem;
    }

    .supervision-visual::after {
        position: relative;
        width: 64%;
        left: 5rem;
        bottom: 0;
        margin-top: var(--s2);
        display: block;
        top: 60%;
    }

    .supervision-images {
    }

    .supervision-images::after {
        width: 65%;
        top: 50px;
        left: 45px;
        right: 0;
        display: block;
        margin-bottom: var(--s2);
        aspect-ratio: 7 / 3;
    }

    .supervision-images::before {
        width: 40%;
        top: -20px;
        left: 0;
        right: 0;
        display: block;
        margin-bottom: var(--s2);
    }

    .supervision-content {
        padding: var(--s2) var(--s2);
        display: flex;
    }

    .supervision-content::after {
        width: 8rem;
        height: 8rem;
        top: -1rem;
        right: 0;
    }

    .supervision-title__lead {
        font-size: 1.6rem;
        margin-left: -1.2rem;
        padding: 1.1rem;
        width: 65%;
        line-height: 1.3;
    }

    .supervision-title__main {
        font-size: 6vw;
    }

    .supervision-text__item, .supervision-desc {
        font-size: 1.6rem;
    }

    #method-dx-lead .section-block__inner {
        margin: 0 auto;
    }
}

/* ---------------------------------------------
Reasons Section (小売業のDXが成功しない理由)
--------------------------------------------- */
.section-reasons {
    padding: 5rem 0 10rem;
    background: #F3F3F3;
    /* background: linear-gradient(to top left, #F3F3F3 0%, #F3F3F3 50%, #ffffff 50%, #ffffff); */
    margin-block: 6rem 0; z-index: 0;
}

.section-reasons .section-block__inner {
    margin: 0 6vw;
    max-width: none;
}

.reasons-header {
    /* background: var(--site-color02); */
    padding: 3vw 2.5vw;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5vw;
}

.reasons-header__title span {
    font-size: 3vw;
    font-weight: 900;
    color: #333;
    line-height: 1.2;
    margin: 0;
    flex: 1;
    /* background: var(--site-color02); */
    padding: 2rem 1rem;
    position: relative;
}

.reasons-header__title span span {
    font-size: 5vw;
    background: none;
    padding: 1rem;
    background: linear-gradient( 315deg, #321970 0%, #326598 70%, #30c6cb 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reasons-header__subtitle {
    font-size: 1.8rem;
    color: #333;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.reasons-header__subtitle a {
    color: inherit;
    text-decoration: none;
    background: url(img/arrow-btn-01-black-right.svg) no-repeat center right / auto 1em;
    padding: 1rem 3rem 1rem 0;
}

.reasons-header__subtitle a:hover {
    text-decoration: underline;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    width: 100%;
}

.reason-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* aspect-ratio: 1 / 1; */
    background: #333;
    transition: transform 0.3s, box-shadow 0.3s;
}

.reason-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.reason-card:nth-child(1)::before {
    background-image: url("img/reason01.jpg");
}

.reason-card:nth-child(2)::before {
    background-image: url("img/reason02.jpg");
}

.reason-card:nth-child(3)::before {
    background-image: url("img/reason03.jpg");
}

.reason-card:nth-child(4)::before {
    background-image: url("img/reason04.jpg");
}

.reason-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 315deg, rgb(0 0 0 / 1) 0%, rgb(0 0 0 / 0.5) 50%, rgb(0 49 51 / 1) 100%);
    z-index: 1;
}

.reason-card:hover {
    transform: translateY(-0.4vw);
    box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.reason-card__number {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    opacity: 0.2;
    pointer-events: none;
    /* padding: 2vw; */
}

.reason-card__number img {
    width: 13vw;
    height: auto;
    display: block;
}

.reason-card__content {
    position: relative;
    z-index: 3;
    padding: 4rem 0 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
    flex: 1;
    justify-content: flex-start;
}

.reason-card__content .text-link {
    padding: 5px 3rem;
    background: url(img/arrow-btn-01-right.svg) no-repeat center right / auto 1.5em;
    margin: 3.5rem 3rem 0 auto;
    text-decoration: none;
    color: #fff;
    float: right;
    text-align: right;
    line-height: 1.3;
}

.reason-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
    flex: 1;
}

.reason-card__title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 2.5vw 0;
    color: #fff;
    background: rgb(51 51 51 / 0.8);
    padding: 2rem 3rem;
    width: 45rem;
}

.reason-card__text {
    line-height: 1.8;
    margin: 0 0 auto 0;
    color: #fff;
    flex: 1;
    padding: 0 3rem;
}

.reason-card__content .btn-internal {
    margin: 2vw 0 0 0;
    max-width: none;
    width: fit-content;
}

.reason-card__content .btn-internal {
    margin-top: auto;
}

.reason-card__content .btn-internal a {
    background: #fff;
    color: #333;
    padding: 1.2vw 2.5vw;
    font-size: 1.6vw;
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    text-decoration: none;
}

.reason-card__content .btn-internal a::after {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background: #18e6ff;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.reasons-source {
    /* padding: 2.5vw; */
    /* font-size: 1.1vw; */
    /* color: #999; */
    /* margin: 0; */
    z-index: 4;
}

.reasons-source a {
    /* color: #999; */
    text-decoration: underline;
}

/* SP調整 (Reasons Section) */
@media screen and (max-width: 767px) {
    .reasons-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 4vw 3vw;
        gap: 2rem;
    }

    .reasons-header__title {
        font-size: 5vw;
    }

    .reasons-header__subtitle {
        font-size: 4vw;
        justify-content: flex-end;
        margin: 0 0 0 auto;
    }

    .reasons-grid {
        grid-template-columns: 1fr;
    }

    .reason-card {
        aspect-ratio: auto;
        min-height: auto;
    }

    .reason-card__content {
        padding: 4vw 0 2rem;
    }

    .reason-card__title {
        font-size: 5.5vw;
        margin-bottom: 2rem;
        padding: 1.5rem 1.5rem;
        width: 70%;
    }

    .reason-card__text {
        font-size: 1.6rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }

    .reason-card__content .btn-internal a {
        font-size: 3vw;
        padding: 1.5rem 3rem;
    }

    .reason-card__number {
    }

    .reason-card__number img {
        width: 25vw;
    }

    .reasons-source {
        padding: 3vw;
        font-size: 2.5vw;
    }
}

/* ---------------------------------------------
DX Issues Section (#cases)
--------------------------------------------- */
#cases.section-block {
    /* background: linear-gradient(to bottom right, #F3F3F3 0%, #F3F3F3 50%, #ffffff 50%, #ffffff 100%); */
    position: relative;
    padding: 15rem 0 0;
    margin-top: 0;
    margin-bottom: 10rem;
    z-index: 0;
}

#cases .section-block__inner {
    position: relative;
    z-index: 3;
    padding: 0 var(--s4) var(--s8);
    max-width: 110rem;
    margin: 0 auto;
}

#cases .cta-panel {
    max-width: 100%;
    margin-top: var(--s8);
}

#cases .section-title {
    margin-bottom: var(--s6);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.3;
    color: #333;
    letter-spacing: 0.02em;
}

#cases .section-title br {
    display: block;
}

.section-title__lead {
    font-size: 3rem;
    display: block;
    margin-bottom: 1.5rem;
}

span.section-title__sub {
    font-size: 6rem;
    background: var(--site-color02);
    padding: 0 1rem;
}

.dx-issues-list {
    margin: var(--s6) 0;
    padding-left: 0;
    margin-left: calc(var(--s4) * -1);
    width: calc(65% + var(--s4));
    overflow: visible;
}

.dx-issues-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    overflow: visible;
}

.dx-issues-list ul li::before {
    display: none;
}

.dx-issue-item {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    padding: 2.5rem var(--s4);
    padding-left: var(--s10);
    isolation: isolate;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
    /* margin-bottom: var(--s2); */
}

.dx-issue-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100vw;
    right: 0;
    bottom: 0;
    background: linear-gradient( 315deg, #321970 0%, #326598 30%, #30c6cb 100%);
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, calc(100% - 7rem) 100%, 0 100%);
    pointer-events: none;
    display: block;
}

#cases.is-visible .dx-issue-item:nth-child(1) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateX(0);
}

#cases.is-visible .dx-issue-item:nth-child(2) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateX(0);
}

#cases.is-visible .dx-issue-item:nth-child(3) {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateX(0);
}

#cases.is-visible .dx-issue-item:nth-child(4) {
    transition-delay: 0.8s;
    opacity: 1;
    transform: translateX(0);
}

.dx-issues-conclusion {
    margin-top: var(--s6);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.8;
    /* text-align: center; */
    color: #333;
}

/* ---------------------------------------------
Slide Arrows Animation
--------------------------------------------- */
#cases .slide-arrows-container {
    position: absolute;
    top: 0;
    right: 15rem;
    width: 300px;
    height: 120%;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, var(--parallax-offset, 0px), 0);
}

.slide-arrows-wrapper {
    display: flex;
    flex-direction: column;
    animation: slideDown 15s linear infinite;
}

.slide-arrow {
    width: 380px;
    height: 490px;
    flex-shrink: 0;
    display: block;
}

@keyframes slideDown {
    0% {
        transform: translateY(-490px);
    }

    100% {
        transform: translateY(0);
    }
}

/* ---------------------------------------------
Solution Section (#solution)
--------------------------------------------- */
#solution.section-block {
    /* background: linear-gradient(to bottom right, #e5e5e5 0%, #e5e5e5 50%, #ffffff 50%, #ffffff 100%); */
    position: relative;
    overflow: hidden;
    padding: 0 0 var(--s10);
    margin-bottom: 10rem;
}

#solution.section-block::before {
    content: "";
    position: absolute;
    top: 42px;
    left: -2vw;
    width: 60rem;
    height: 70rem;
    background: url(img/bg-dec01.svg) no-repeat center / cover;
    z-index: 3;
}

#solution .section-block__inner {
    position: relative;
    z-index: 3;
    padding: 0 var(--s4) var(--s8);
    max-width: max-content;
    margin: 0 6vw;
}

#solution .slide-arrows-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 383px;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.solution-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--s6);
    align-items: start;
}

.solution-left {
    max-width: 100%;
}

.solution-lead {
    margin: 0 var(--s2) var(--s2);
    font-weight: 700;
    color: #333;
    font-size: 2.5vw;
}

.solution-title {
    font-size: 6rem;
    font-weight: 900;
    line-height: 1.2;
    color: #333;
    margin: 0 var(--s2) var(--s6);
    position: relative;
    padding-left: var(--s3);
}

.solution-title__line {
    display: block;
    font-size: 6vw;
    line-height: 1.1;
}

.solution-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0.4rem;
    height: 100%;
    background: #333;
}

.solution-text {
    font-size: 1.8rem;
    FONT-WEIGHT: 700;
    line-height: 2;
    color: #333;
    margin-top: var(--s6);
    /* margin-right: 15rem; */
}

.solution-right {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    max-width: 100%;
    margin-top: 4rem;
}

.solution-box {
    color: #fff;
    padding: var(--s4) var(--s5);
    padding-right: 0;
    position: relative;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.solution-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    right: -30vw;
    bottom: 0;
    background: #e9f100;
    z-index: -1;
    clip-path: polygon(12rem 0, 100% 0, 100% 100%, 0 100%);
}

.solution-box__title {
    font-size: 3.5vw;
    font-weight: 700;
    margin: 0 0 var(--s1) 0;
    color: #333;
}

.solution-box__subtitle {
    font-size: 1.5vw;
    margin: 0;
    color: #333;
    line-height: 1.6;
    /* padding-left: 4rem; */
}

#solution.is-visible .solution-box--1 {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateX(0);
}

#solution.is-visible .solution-box--2 {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateX(0);
}

#solution.is-visible .solution-box--3 {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateX(0);
}

/* ---------------------------------------------
DX Details Section (#dx-details)
--------------------------------------------- */
#dx-details.section-block {
    background: #fff;
    position: relative;
    padding: var(--s10) 0;
}

#dx-details .section-block__inner {
    max-width: 110rem;
    margin: 0 auto;
    padding: 0 var(--s4);
}

.dx-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s6);
}

.dx-detail-box {
    background: #333;
    color: #fff;
    border-radius: 0.8rem;
    padding: var(--s6);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s;
}

#dx-details.is-visible .dx-detail-box--1 {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateX(0);
}

#dx-details.is-visible .dx-detail-box--2 {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateX(0);
}

#dx-details.is-visible .dx-detail-box--3 {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateX(0);
}

.dx-detail-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dx-detail-number {
    position: absolute;
    top: -1rem;
    left: -1rem;
    font-size: 12rem;
    font-weight: 900;
    color: #FFFF00;
    line-height: 1;
    z-index: 1;
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    pointer-events: none;
}

#dx-details.is-visible .dx-detail-box--1 .dx-detail-number {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateX(0);
}

#dx-details.is-visible .dx-detail-box--2 .dx-detail-number {
    transition-delay: 0.5s;
    opacity: 1;
    transform: translateX(0);
}

#dx-details.is-visible .dx-detail-box--3 .dx-detail-number {
    transition-delay: 0.7s;
    opacity: 1;
    transform: translateX(0);
}

.dx-detail-content {
    position: relative;
    z-index: 2;
    margin-top: var(--s8);
}

.dx-detail-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 var(--s2) 0;
}

.dx-detail-subtitle {
    font-size: 1.6rem;
    color: #ccc;
    margin: 0 0 var(--s4) 0;
    font-weight: 400;
}

.dx-detail-description {
    margin-bottom: var(--s6);
}

.dx-detail-description p {
    font-size: 1.5rem;
    line-height: 2;
    color: #fff;
    margin: 0;
}

.dx-detail-example {
    margin-top: var(--s6);
    padding-top: var(--s6);
    border-top: 1px solid #e5e5e5;
}

.dx-detail-example__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 var(--s4) 0;
}

.dx-detail-video, .dx-detail-image {
    width: 100%;
    border-radius: 0.4rem;
    overflow: hidden;
}

.dx-detail-video video {
    width: 100%;
    height: auto;
    display: block;
}

.dx-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------------------------------------------
Overseas Cases Section (#overseas-cases)
--------------------------------------------- */
#overseas-cases.section-block {
    /* background: #F2F2F2; */
    position: relative;
    padding: 0 0 var(--s10);
}

#overseas-cases .top-hero__bg {
    top: -8rem;
    z-index: 0;
}

#overseas-cases .section-block__inner {
    max-width: 110rem;
    margin: 0 auto;
    padding: 0 var(--s4);
    display: flex;
    flex-direction: column;
    /* gap: 5rem; */
    position: relative;
    justify-content: flex-start;
}

#overseas-cases.section-block::after {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 45%;
    aspect-ratio: 6 / 4;
    background: url(img/example-top01.jpg) no-repeat center / cover;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
    z-index: 0;
    max-height: 50rem;
}

#overseas-cases .section-block__inner::before {
    content: "";
    position: absolute;
    top: -20rem;
    left: -25rem;
    width: 20rem;
    height: 24rem;
    background: url(img/cont-dec01.svg) no-repeat center / cover;
    z-index: 3;
}

.overseas-cases-title {
    margin: 0 0 3rem;
    text-align: right;
    position: relative;
    /* overflow: hidden; */
    border-bottom: 4px solid #333;
    padding-bottom: 2rem;
}

.overseas-cases-title span {
    font-size: 3vw;
    font-weight: 900;
    color: #333;
    line-height: 1.2;
    margin: 0;
    flex: 1;
    /* background: var(--site-color02); */
    padding: 2rem 1rem;
    position: relative;
}

.overseas-cases-title span span::after {
    display: none;
}

.overseas-cases-title span span {
    font-size: 5vw;
    background: none;
    padding: 1rem;
    position: relative;
    background: linear-gradient( 315deg, #321970 0%, #326598 70%, #30c6cb 100%);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.overseas-cases-title__highlight {
    display: inline-block;
    background: #FFFF00;
    padding: var(--s3) var(--s5);
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1.4;
    color: #333;
}

.overseas-cases-grid {
    margin-top: 10.6rem;
    display: grid;
    grid-template-columns: 0 1fr;
    /* gap: var(--s6); */
}

.overseas-cases-nav {
    align-self: start;
    position: sticky;
    top: 3rem;
    width: 15rem;
    z-index: 3;
}

.overseas-cases-nav__panel {
    background: #e9f100;
    padding: 2rem 0 2rem 2rem;
    /* box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); */
}

.overseas-cases-nav__current {
    margin-bottom: 1.5rem;
}

.overseas-cases-nav__num {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: #333;
}

.overseas-cases-nav__text {
    font-size: 2.4rem;
    font-weight: 700;
    color: #333;
    border-top: 2px solid #333;
    padding-top: 1rem;
    margin-top: 1rem;
}

.overseas-cases-nav__links a {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    padding: 1.4rem 0 1rem 0;
    background: url(img/num-bk01.svg) no-repeat top left / auto 0.8em;
    margin-bottom: 0.8rem;
}

.overseas-cases-nav__links a:nth-child(2) {
    background: url(img/num-bk02.svg) no-repeat top left / auto 0.8em;
}

.overseas-cases-nav__links a:nth-child(3) {
    background: url(img/num-bk03.svg) no-repeat top left / auto 0.8em;
}

.overseas-cases-nav__links a {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: 700;
    padding: 1.4rem 0 1rem 0;
    background: url(img/num-bk01.svg) no-repeat top left / auto 0.8em;
    margin-bottom: 0.8rem;
}

.overseas-cases-nav__links a:nth-child(2) {
    background: url(img/num-bk02.svg) no-repeat top left / auto 0.8em;
}

.overseas-cases-nav__links a:nth-child(3) {
    background: url(img/num-bk03.svg) no-repeat top left / auto 0.8em;
}

.overseas-cases-nav__links a:hover {
    color: #ffffff;
}

.overseas-cases-list {
    min-width: 0;
}

.overseas-cases-text {
    width: 50%;
    margin: 0 0 0 auto;
    font-size: 1.6rem;
    line-height: 1.8;
}

/* Case Study */
.case-study {
    position: relative;
    /* background: #fff; */
    padding: 100px 15rem var(--s8) 20rem;
    margin-bottom: 11rem;
    background: #F3F3F3;
    /* margin-right: 6rem; */
}

.case-study.case-study--02 {
    background: #ebebeb;
}

.case-study .btn-web {
    margin: 5rem auto 5rem;
    position: relative;
    z-index: 5;
}

.case-study__number {
    position: absolute;
    top: var(--s4);
    left: var(--s4);
    font-size: 12rem;
    font-weight: 900;
    color: #FFFF00;
    line-height: 1;
    z-index: 1;
}

.case-study__header {
    margin-bottom: var(--s3);
    position: relative;
    z-index: 0;
}

.case-study__title {
    display: inline-block;
    padding: 0 0 var(--s1);
    font-size: 3rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.case-study__title span::after {
    content: "";
    position: absolute;
    top: -11rem;
    /* left: -51vw; */
    right: -13rem;
    bottom: 0;
    background: #ffffff;
    z-index: -2;
    clip-path: polygon(0 0, 100% 0, calc(100% - 15rem) 100%, 0 100%);
    pointer-events: none;
    display: block;
    width: 50vw;
    height: 30rem;
}

.case-study__title span {
    display: inline-block;
    background: #e9f100;
    padding: var(--s2) var(--s1);
    font-size: 6rem;
    position: relative;
}

.case-study__main {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: var(--s3);
    margin-bottom: var(--s2);
    position: relative;
    z-index: 2;
}

.case-study__tabs {
    display: flex;
    gap: var(--s2);
    margin: var(--s4) 0 var(--s4);
    z-index: 1;
    justify-content: flex-start;
}

.case-study__tab {
    min-width: 18rem;
    padding: var(--s2) var(--s6);
    background: #ffffff;
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    appearance: none;
    font-family: inherit;
    position: relative;
    width: 30rem;
}

.case-study__tab span {
    font-size: 3.5rem;
}

.case-study__tab.is-active {
    background: #333;
    color: #e9f100;
}

.case-study__tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.6rem;
    transform: translateX(-50%);
    border-left: 1.6rem solid transparent;
    border-right: 1.6rem solid transparent;
    border-top: 1.6rem solid #333;
}

.case-study__tab-panel {
    display: none;
}

.case-study__tab-panel.is-active {
    display: block;
}

.case-study__visual {
    position: relative;
    /* max-width: 70rem; */
    width: 100%;
    height: 28vw;
}

.case-study__video {
    position: relative;
    width: 50vw;
    /* margin-bottom: var(--s2); */
    /* background: #9b9b9b; */
    min-height: 28vw;
    height: inherit;
}

.case-study__video img {
    width: 100%;
    height: auto;
    display: block;
}

.case-study__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.case-study__caption {
    font-size: 1.4rem;
    color: #333;
    margin: 0;
}

.case-study__time {
    display: grid;
    grid-template-columns: 12rem 1fr;
    align-items: center;
    gap: var(--s3);
    background: #ffffff;
    margin-bottom: var(--s2);
}

.case-study__time-content {
    flex: 1;
    display: flex;
    gap: var(--s1);
    flex-direction: column;
}

.case-study__time-title {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
}

.case-study__time-text {
    margin: 0;
    color: #333;
    line-height: 1.7;
    font-size: 1.4rem;
}

.case-study__time-visual {
    position: relative;
    width: 12rem;
}

.case-study__time-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.case-study__time-visual-badge {
    background: #5a5a5a;
}

.case-study__time-badge {
    /* position: absolute; */
    top: 0;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.4rem;
    text-decoration: none;
}

.case-study__time-badge img {
    width: 1.6rem;
    height: auto;
    display: block;
}

.case-info {
    margin: 0;
}

.case-study__info .caption {
    text-align: left;
    font-size: 1rem;
    line-height: 1.3;
}

.case-info dt {
    font-size: 1.4rem;
    font-weight: 700;
    color: #333;
    margin-top: var(--s2);
    margin-bottom: var(--s1);
    background: #fff;
    padding: 1rem;
    /* width: 18rem; */
}

.case-info dt:first-child {
    margin-top: 0;
}

.case-info dd {
    font-size: 1.6rem;
    color: #333;
    margin: 0 0 var(--s2) 0;
    line-height: 1.8;
}

.case-study__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s8);
    margin-bottom: var(--s6);
    margin-top: var(--s6);
    position: relative;
    z-index: 2;
}

.case-study__challenges {
    background: #ffffff;
    /* padding: var(--s4); */
    border-radius: 0.4rem;
    position: relative;
}

.case-study__challenges::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6rem;
    width: 5rem;
    height: 8rem;
    background: url(img/arrow.svg) no-repeat center / 100% auto;
    z-index: 2;
    margin: auto;
}

.case-study__effects {
    background: #ffffff;
    /* padding: var(--s4); */
    border-radius: 0.4rem;
    position: relative;
}

.case-study.case-study--01::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    left: 12vw;
    width: 15rem;
    height: 15rem;
    background: url("img/num01.svg") no-repeat center / contain;
    z-index: 5;
    pointer-events: none;
}

.case-study.case-study--02::before {
    content: "";
    position: absolute;
    top: -2rem;
    left: 12vw;
    width: 18rem;
    height: 15rem;
    background: url("img/num02.svg") no-repeat center / contain;
    z-index: 5;
    pointer-events: none;
}

.case-study.case-study--03::before {
    content: "";
    position: absolute;
    top: -2rem;
    left: 12vw;
    width: 18rem;
    height: 15rem;
    background: url("img/num03.svg") no-repeat center / contain;
    z-index: 5;
    pointer-events: none;
}

.case-study__subtitle {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    /* margin: 0 0 var(--s3) 0; */
    background: #9B9B9B;
    padding: 2rem 2rem;
}

.case-study__effects .case-study__subtitle {
    color: #333;
    background: #e9f100;
}

.case-study__challenges ul, .case-study__effects ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding: var(--s4);
}

.case-study__challenges ul li, .case-study__effects ul li {
    font-size: 1.6rem;
    line-height: 1.3;
    color: #333;
    margin-bottom: var(--s2);
    padding-left: var(--s3);
    position: relative;
}

.case-study__challenges li::before, .case-study__effects li::before {
    content: "";
    position: absolute;
    left: 0;
}

.case-study__challenges ul li::before {
    content: "";
    background: #9b9b9b;
    position: absolute;
    left: 0;
}

.case-study__effects li {
    color: #333;
    FONT-WEIGHT: 700;
}

.case-study__points {
    /* background: #0066CC; */
    /* padding: var(--s4) var(--s5); */
    margin-bottom: var(--s6);
    position: relative;
    z-index: 2;
}

.case-study__points-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 var(--s2) 0;
    background: linear-gradient( 315deg, #321970 0%, #326598 30%, #30c6cb 100%);
    padding: 2.5rem 2rem;
}

.case-study__points-content {
    color: #fff;
    display: flex;
    align-items: baseline;
    gap: 4rem;
    margin-block: 5rem 0; }

.case-study__points-content p {
    font-size: 1.8rem;
    line-height: 1.5;
    /* margin: 0 0 var(--s3) 0; */
    color: #333;
    background: #fff;
    padding: 4rem 2rem 2rem 2rem;
    FONT-WEIGHT: 700;
    width: 100%;
    position: relative;
    min-height: 13rem;
}

.case-study__points-content p::before {
    content: "";
    position: absolute;
    top: -3rem;
    left: 10%;
    bottom: 0;
    transform: translate(-45%, 0);
    width: 6rem;
    height: 6rem;
    background: no-repeat center / contain;
    pointer-events: none;
    /* margin: auto; */
}

.case-study__points-content p:nth-child(1)::before {
    background-image: url("img/case-study__points01.svg");
}

.case-study__points-content p:nth-child(2)::before {
    background-image: url("img/case-study__points02.svg");
}

.case-study__points-content p:nth-child(3)::before {
    background-image: url("img/case-study__points03.svg");
}

.case-study__points-content p:nth-child(4)::before {
    background-image: url("img/case-study__points04.svg");
}

.case-study__points-content p:last-child {
    margin-bottom: 0;
}

.case-study__cta {
    text-align: center;
    margin-bottom: var(--s8);
    position: relative;
    z-index: 2;
}

.case-study__cta .btn-internal {
    box-shadow: none;
}

.case-study__cta .btn-internal a {
    width: 100%;
    margin: 0;
    padding: var(--s4) var(--s3) var(--s8) var(--s3);
    background: url(img/arrow-btn-01-right.svg) no-repeat bottom 2rem center / auto 1.5em, linear-gradient( 315deg, #321970 0%, #326598 70%, #30c6cb 100%);
    display: block;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transform: translate(0, 0);
    transition: transform 0.3s;
    font-size: 1.8rem;
    border: 0;
}

.case-study__cta .btn-internal a:hover {
    transform: translate(0.8rem, 0.8rem);
}

.case-study__cta .btn-internal a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(img/case-study__cta-bg.jpg) no-repeat center / cover;
    z-index: -1;
    opacity: 0.2;
}

.btn-case-study {
    display: inline-block;
    background: #0066CC;
    color: #fff;
    padding: var(--s3) var(--s6);
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.4rem;
    position: relative;
    padding-right: calc(var(--s6) + 2rem);
}

.btn-case-study::after {
    content: "→";
    position: absolute;
    right: var(--s3);
    top: 50%;
    transform: translateY(-50%);
}

.case-study__product {
    background: #ffffff;
    padding: var(--s4) var(--s5);
    margin-bottom: var(--s6);
    position: relative;
    z-index: 2;
}

.case-study__product-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 var(--s2) 0;
    position: relative;
    padding: 1.5rem;
}

.case-study__product-content {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: var(--s3);
    margin-bottom: 2rem;
}

.product-tags {
    display: flex;
    gap: var(--s4) var(--s2);
    margin-bottom: var(--s4);
    flex-wrap: wrap;
}

div.product-tag {
    cursor: auto;
}

.product-tag {
    background: #e5e5e5;
    padding: var(--s1) var(--s3);
    font-size: 2rem;
    FONT-WEIGHT: 700;
    color: #333;
    /* border-radius: 0.2rem; */
    border: 0;
    cursor: pointer;
    appearance: none;
    font-family: inherit;
}

.product-visual {
    margin-top: -2rem;
    margin-bottom: -18rem;
}

.product-tag.is-active {
    background: #333;
    color: #fff;
    position: relative;
}

.product-tag.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.5rem;
    transform: translateX(-50%);
    border-left: 1.6rem solid transparent;
    border-right: 1.6rem solid transparent;
    border-top: 1.6rem solid #333;
}

.product-tag:focus-visible {
    outline: 2px solid #333;
    outline-offset: 2px;
}

.case-study__product-panel {
    display: none;
}

.case-study__product-panel.is-active {
    display: block;
}

.product-details {
    margin: 0;
}

.product-details dt {
    font-size: 1.6rem;
    font-weight: 700;
    color: #333;
    margin-top: var(--s3);
    margin-bottom: var(--s2);
    border-bottom: 1px solid #333;
    padding: 1rem;
}

.product-details dt:first-child {
    margin-top: 0;
}

.product-details dd {
    font-size: 1.6rem;
    color: #333;
    margin: 0 0 var(--s3) 0;
}

.product-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-details li {
    font-size: 1.6rem;
    line-height: 1.3;
    color: #333;
    margin-bottom: var(--s1);
    padding-left: var(--s3);
    position: relative;
}

.product-details li::before {
    content: "・";
    position: absolute;
    left: 0;
}

.product-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.case-study__solution {
    /* margin-bottom: var(--s6); */
    position: relative;
    z-index: 2;
    background: #F3F3F3;
    padding: 3rem;
}

.case-study__solution::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -3rem;
    width: 8rem;
    height: 9rem;
    background: url(img/cont-dec01.svg) no-repeat center / cover;
    z-index: 3;
}

.case-study__solution-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 var(--s3) 0;
    border-bottom: 4px solid #333;
    padding-bottom: 1.5rem;
}

.case-study__solution ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.case-study__solution li {
    font-size: 1.6rem;
    line-height: 1.3;
    color: #333;
    margin-bottom: var(--s1);
    padding-left: var(--s3);
    position: relative;
}

.case-study__product-title::after {
    content: "";
    position: absolute;
    top: 0;
    left: -30rem;
    bottom: 0;
    background: #e9f100;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
    pointer-events: none;
    display: block;
    width: 70rem;
}

.case-study__solution li::before {
    content: "・";
    position: absolute;
    left: 0;
}

.case-study__solution ul li::before {
    background: #30bec7;
    top: 0.1rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
}

.case-study__actions {
    display: flex;
    gap: var(--s4);
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}

.case-study__actions .btn-internal {
    max-width: 46rem;
    width: 100%;
    margin: 0;
    position: relative;
    box-shadow: none;
}

.case-study__actions .btn-internal a {
    width: 100%;
    margin: 0;
    padding: var(--s2) var(--s6) var(--s2) var(--s3);
    background: url(img/arrow-btn-01-right.svg) no-repeat right 1.5rem center / auto 1.5em, linear-gradient(315deg, #321970 0%, #326598 70%, #06888d 100%);
    display: block;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transform: translate(0, 0);
    font-size: 1.8rem;
    border: 0;
    box-shadow: none;
    transition: all .4s ease;
}

.case-study__actions .btn-internal a:hover {
    text-decoration: none;
    opacity: 0.6;
}

.btn-product-info {
    display: inline-block;
    background: #0066CC;
    color: #fff;
    padding: var(--s3) var(--s6);
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.4rem;
    position: relative;
    padding-right: calc(var(--s6) + 2rem);
}

.btn-product-info::after {
    content: "→";
    position: absolute;
    right: var(--s3);
    top: 50%;
    transform: translateY(-50%);
}

.btn-official {
    display: inline-block;
    background: #FFFF00;
    color: #333;
    padding: var(--s3) var(--s6);
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.4rem;
}

/* ---------------------------------------------
Company Info Section (#company-info)
--------------------------------------------- */
#company-info.section-block {
    background: #fff;
    position: relative;
    padding: var(--s10) 0;
}

#company-info.section-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1rem;
    width: 20rem;
    height: 24rem;
    background: url(img/cont-dec01.svg) no-repeat center / cover;
    z-index: 3;
}

#company-info .section-block__inner {
    max-width: none;
    margin: 0 6vw;
    padding: 0;
}

.company-info-panel {
    background: #F3F3F3;
    /* border-radius: 0.8rem; */
    padding: var(--s7) var(--s6);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* column-gap: var(--s6); */
    /* row-gap: var(--s6); */
}

.company-info__graphic {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}

.company-info__graphic-yellow {
    position: absolute;
    top: 0;
    left: 0;
    width: 11.5rem;
    height: 8.5rem;
    background: #FFFF00;
    /* transform: rotate(-15deg); */
}

.company-info__graphic-blue {
    position: absolute;
    top: 12%;
    left: -6%;
    width: 130%;
    height: 22%;
    background: linear-gradient(135deg, #30c6cb 0%, #326598 50%, #321970 100%);
    transform: rotate(-15deg);
}

.company-info__content {
    position: relative;
    z-index: 2;
}

.company-info__header {
    margin-bottom: var(--s5);
}

.company-info__company {
    margin-bottom: var(--s3);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.company-info__text {
    padding-right: 6rem;
}

.company-info__label {
    font-size: 1.4rem;
    color: #333;
    /* margin: 0 0 var(--s1) 0; */
    font-weight: 700;
}

.company-info__name {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0 2rem;
}

.company-info__title-area {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    border-bottom: 4px solid #333;
    padding-bottom: 1rem;
}

.company-info__title {
    font-size: 6rem;
    font-weight: 900;
    color: #333;
    margin: 0;
    line-height: 1;
}

.company-info__team {
    font-size: 1.6rem;
    color: #333;
    FONT-WEIGHT: 700;
}

.company-info__text p {
    font-size: 1.6rem;
    line-height: 2;
    color: #333;
    margin: 0 0 var(--s3) 0;
}

.company-info__text p:last-child {
    margin-bottom: 0;
}

.company-info__visual {
    position: relative;
    z-index: 2;
    align-self: center;
}

.company-info__placeholder {
    width: 100%;
    aspect-ratio: 6 / 3;
    background: #666;
    /* border-radius: 0.4rem; */
    overflow: hidden;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
}

.company-info__placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.company-info__cta {
    text-align: right;
    z-index: 2;
    grid-column: 1 / -1;
    /* position: relative; */
}

.company-info__cta .btn-link {
    max-width: 46rem;
    width: 100%;
    margin: 0;
    position: absolute;
    bottom: 20px;
    right: 6vw;
    z-index: 1;
    /* box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); */
}

.company-info__cta .btn-link a {
    width: 100%;
    margin: 0;
    padding: var(--s2) var(--s6) var(--s2) var(--s3);
    background: url(img/arrow-btn-01-right.svg) no-repeat right 1.5rem center / auto 1.5em, linear-gradient(315deg, #321970 0%, #326598 70%, #06888d 100%);
    display: block;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transform: translate(0, 0);
    font-size: 1.8rem;
    border: 0;
    transition: all .4s ease;
}

.btn-company-info {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    background: linear-gradient(90deg, #30c6cb 0%, #326598 50%, #321970 100%);
    color: #fff;
    padding: var(--s3) var(--s6);
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
    /* border-radius: 0.4rem; */
    position: relative;
}

.btn-company-info::after {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background: #fff;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .overseas-cases-grid {
        grid-template-columns: 1fr;
    }

    .overseas-cases-nav {
        position: static;
        display: none;
    }

    .overseas-cases-nav__panel {
        max-width: 100%;
    }

    .top-hero__dec02 {
        width: 150vw;
        z-index: -1;
        left: 45%;
        top: 12rem;
    }

    .case-study__product-title::after {
        width: 100%;
        left: -2.3rem;
    }

    .case-study__tab {
        width: 100%;
        min-width: auto;
        font-size: 4vw;
    }

    .case-study__main {
        display: flex;
        flex-direction: column;
    }

    .case-study {
        padding: var(--s4) var(--s2);
        margin-bottom: 8rem;
    }

    .case-study:last-child {
        margin-bottom: 0;
    }

    .case-study__header {
        width: 100%;
    }

    #solution.section-block::before {
        width: 35%;
        height: 20%;
        left: auto;
        right: 5vw;
    }

    .case-study__title span::after {
        right: 19px;
        width: 50vw;
        height: 50vw;
        top: -4rem;
    }

    .navigation01-menu-area {
        flex-direction: column-reverse;
    }

    .navigation01-menu {
        flex-direction: column;
        display: none;
    }

    .section-block__inner {
        padding: 0 var(--s2);
    }

    .section-reasons .section-block__inner {
        margin: 0;
    }

    #method .section-block__inner {
        margin: 0;
    }

    .solution-content {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #solution .section-block__inner {
        margin: 0;
        padding: var(--s4) 0;
    }

    #overseas-cases .section-block__inner {
        flex-direction: column;
        padding: var(--s4) var(--s2);
    }

    .overseas-cases-text {
        width: 100%;
    }

    .overseas-cases-list {
    }

    .case-study__video {
        width: 100%;
        min-height: 52vw;
    }

    .case-info dt {
        width: 100%;
        font-size: 4.5vw;
    }

    .case-study__content {
        display: flex;
        flex-direction: column;
        gap: var(--s4);
        margin-block: var(--s9); }

    .case-study__challenges: :after {
        transform: rotate(90deg);
        top: auto;
        bottom: -48px;
        right: 0;
        width: 0;
        height: 8rem;
        z-index: 10;
        margin: auto;
    }

    .case-study__points-content {
        flex-direction: column;
        gap: 2rem;
    }

    .case-study__product {
        padding: var(--s4) var(--s2);
    }

    .case-study__product-content {
        display: flex;
        flex-direction: column;
    }

    .supervision-buttons {
        flex-direction: column;
    }

    .company-info-panel {
        display: flex;
        flex-direction: column;
        padding: var(--s2) var(--s2) var(--s4);
    }

    .company-info__text {
        padding-right: 0;
    }

    header.header-area.header-area--top {
        left: 0;
    }

    .gnavi-btn {
        width: var(--s8);
        height: var(--s8);
        background: #333;
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 200;
        cursor: pointer;
    }

    #method .section-block__inner::after {
        top: 0.5rem;
        right: 1.5rem;
        width: 4vw;
        height: 40vw;
    }

    .top-hero__lead {
        gap: 0;
    }

    .top-hero__title .mask-line span span.strong {
        margin: 0;
        padding: 0;
        font-size: 15vw;
    }

    .top-hero__title .mask-line span {
        margin: 0;
    }

    .top-hero__title .mask-line:nth-child(3) span {
        animation-delay: 0.9s;
        margin-top: 0.5rem;
    }

    .pr-text {
        margin-top: 1rem;
        line-height: 1.3;
    }

    .issue-lead__img img {
        height: 45vw;
        width: 100%;
    }

    #issue {
        margin-block: 0; padding: 0;
    }

    .top-hero__dec03 {
        top: -4vw;
        width: 32vw;
        height: 35vw;
    }

    .issue-lead__media {
        position: relative;
    }

    .issue-lead__dec {
        left: 0;
        bottom: 53%;
        width: 21%;
    }

    .u-slope-top::before {
        display: none;
    }

    .issue-lead__body {
        margin-block: 5rem 0; }

    .graph-scale {
        margin-right: 0;
        font-size: 1.2rem;
    }

    .issue-graph__content {
        margin-block: 4rem 0; }

    .supervision-buttons .btn-internal a {
        background: url(img/arrow-btn-01-wht-down.svg) no-repeat right 1rem center / auto 1em, linear-gradient(315deg, #321970 0%, #326598 70%, #06888d 100%);
        padding: var(--s3) var(--s6) var(--s3) var(--s3);
    }

    .reasons-header__title span {
        font-size: 7vw;
        padding: 1rem 0;
    }

    .reasons-header__title span span {
        font-size: 12vw;
        padding: 0;
    }

    .reasons-header__subtitle a {
        padding: 1rem 3rem 1rem 1rem;
        background: url(img/arrow-btn-01-black-right.svg) no-repeat center right 0.5rem / auto 1em;
        border: none;
        text-align: right;
    }

    #cases.section-block {
        padding: 5rem 0 10rem;
        margin-bottom: 0;
    }

    #cases .slide-arrows-container {
        top: 0;
        right: 0;
        width: 77vw;
        height: 100%;
    }

    .section-title__lead {
        font-size: 5vw;
    }

    #cases .section-block__inner {
        padding: 0 var(--s2);
    }

    span.section-title__sub {
        font-size: 9vw;
    }

    #cases .section-title {
        font-size: 7vw;
        margin-bottom: var(--s3);
    }

    .dx-issues-list {
        width: 100%;
        margin: var(--s3) 0;
    }

    .dx-issue-item {
        font-size: 5vw;
        padding: 1.5rem;
    }

    .dx-issues-conclusion {
        font-size: 5vw;
    }

    .solution-lead {
        font-size: 5vw;
    }

    .solution-title__line {
        font-size: 9vw;
    }

    .solution-text {
        font-size: 5vw;
        margin: var(--s2);
        line-height: 1.5;
    }

    .solution-box::after {
        top: 0;
        left: auto;
        right: 0;
        bottom: 0;
        width: 85%;
    }

    .solution-right {
        width: 100%;
        margin-top: 0;
        margin-left: 15vw;
    }

    .solution-box__title {
        font-size: 7vw;
    }

    .solution-box__subtitle {
        font-size: 5vw;
    }

    #overseas-cases.section-block::after {
        top: -128px;
        left: 0;
        width: 80%;
        aspect-ratio: 10 / 4;
    }

    .overseas-cases-title span {
        font-size: 7vw;
        padding: 1rem 1rem;
    }

    .overseas-cases-title span span {
        font-size: 12vw;
        padding: 0;
    }

    .case-study.case-study--01::before {
        top: -4rem;
        left: 6vw;
        width: 8rem;
        height: 8rem;
    }

    .case-study__title span {
        font-size: 9vw;
        display: block;
        margin-bottom: 0.7rem;
    }

    .case-study__title {
        font-size: 5vw;
    }

    .case-info dd {
        padding-left: 1rem;
    }

    .case-study__time {
        display: grid;
        align-items: start;
    }

    .case-study__time-content {
        gap: var(--s1);
        padding: 1.5rem;
        padding-left: 0;
    }

    .issue-graph__content__catch::after {
        left: 0;
        right: 0;
    }

    #company-info .section-block__inner {
        margin: 0;
    }

    #company-info.section-block::before {
        left: 0rem;
        width: 19vw;
        height: 24vw;
    }

    .company-info__label {
        font-size: 3vw;
    }

    .company-info__name {
        font-size: 5vw;
    }

    .company-info__title {
        font-size: 9vw;
    }

    .company-info__team {
        font-size: 5vw;
    }

    .company-info__cta .btn-link {
        width: 50%;
        margin: 0;
        position: absolute;
        bottom: 10px;
        right: 0;
    }

    .company-info__placeholder {
        aspect-ratio: 8 / 3;
        margin-top: 2rem;
    }

    .case-study__points-content p {
        line-height: 1.3;
        padding: 2.5rem 2rem 1rem 2rem;
        padding: var(--s5) var(--s2) var(--s2);
    }

    .product-details dd {
        padding: 0 1rem;
    }

    .product-visual {
        margin-top: 0;
        margin-bottom: 0;
    }

    .case-study__solution {
        padding: 2rem;
    }

    .case-study.case-study--02::before {
        top: -4rem;
        left: 6vw;
        width: 8rem;
        height: 8rem;
    }

    .case-study.case-study--03::before {
        top: -4rem;
        left: 6vw;
        width: 8rem;
        height: 8rem;
    }

    .case-study__tabs {
        width: 100%;
    }

    .case-study__visual {
        min-height: 52vw;
    }

    .product-tag {
        font-size: 3.2vw;
        width: 48%;
        padding: var(--s2) var(--s1);
        line-height: 1.3;
    }

    .company-info__graphic-yellow {
        width: 7rem;
        height: 6rem;
    }

    .footer-area-logo {
        width: 45vw;
    }

    .case-study__tab span {
        font-size: 7vw;
    }

    .case-study__subtitle {
        line-height: 1.3;
    }

    #company-info.section-block {
        margin: 0 var(--s2);
        padding: var(--s10) 0;
    }
.case-study__challenges::after {
    bottom: -30px;
    top: auto;
    right: 0;
    left: 0;
    width: 3rem;
    height: 5rem;
    transform: rotate(90deg);
}
    .company-info__company {
        margin-top: 2rem;
        margin-bottom: var(--s2);
    }

    .company-info__cta .btn-link a {
        background: url(img/arrow-btn-01-right.svg) no-repeat right 1rem center / auto 1em, linear-gradient(315deg, #321970 0%, #326598 50%, #30c6cb 100%);
    }

    .case-study__points-content p::before {
        width: 4rem;
        height: 4rem;
        top: -2rem;
    }

    .reason-card__content .text-link {
        margin: 0 2rem 0 auto;
        background: url(img/arrow-btn-01-right.svg) no-repeat center right / auto 1em;
        font-size: 1.5rem;
        text-align: right;
        padding: 5px 2rem;
    }

    .case-study__actions .btn-internal a {
        background: url(img/arrow-btn-01-right.svg) no-repeat right 1rem center / auto 1em, linear-gradient(315deg, #321970 0%, #326598 70%, #30c6cb 100%);
        text-align: center;
    }

    .gnavi-list__sub .gnavi-list__link {
        padding: 5px var(--s6) 5px var(--s4);
    }

    .segment-value {
        font-size: 6vw;
    }

    .supervision-text__item {
        font-size: 5vw;
        line-height: 1.5;
    }

    .solution-box {
        padding: var(--s2) var(--s5);
    }

    .case-study__points-title {
        margin-bottom: 0;
        margin-top: var(--s8);
    }

    .dx-issues-list ul {
        gap: 0;
    }

    .onb-index01-frame {
        width: 90%;
        margin-bottom: 3rem;
    }

    .overseas-cases-title {
        padding-bottom: 1rem;
    }

    .case-study__info .caption {
        padding-left: 1rem;
    }

    .case-study__solution::before {
        top: -30px;
        left: -2.5rem;
        width: 7rem;
        height: 7rem;
    }

    .case-study .btn-web {
        margin: 3rem auto 5rem;
    }

    .overseas-cases-title {
        padding-bottom: 1rem;
    }

    .case-study__info .caption {
        padding-left: 1rem;
    }

    .product-visual img {
        /* width: 70%; */
        margin: auto;
    }

    .case-study__solution::before {
        top: -30px;
        left: -2.5rem;
        width: 7rem;
        height: 7rem;
    }

    .case-study .btn-web {
        margin: 3rem auto 5rem;
    }

    .case-study__challenges ul, .case-study__effects ul {
        padding: var(--s2);
    }

    .case-study__cta {
        margin-bottom: 10rem;
    }

    .case-study__cta .btn-internal {
        width: 85%;
    }

    #method.section-supervision {
        padding: 0 0 var(--s5);
        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    span.legend-item {
        font-size: 3vw;
    }

    .graph-legend {
        gap: 15px;
        justify-content: flex-end;
    }

    .legend-swatch {
        width: 12px;
    }

    .issue-graph__content__catch {
        font-size: 5vw;
    }

    .supervision-title__main::before {
        font-size: 4.5vw;
        display: block;
    }

    #method-dx-lead .section-block__inner {
        margin: 0 auto;
    }

    .case-study__cta .btn-internal a {
        padding: var(--s2) var(--s5) var(--s2) var(--s2);
        background: url(img/arrow-btn-01-right.svg) no-repeat right 1rem center / auto 1em, linear-gradient( 315deg, #321970 0%, #326598 70%, #30c6cb 100%);
    }

    #low-page .pr-text {
        margin-bottom: 2rem;
    }

    .footer-bottom {
        padding: var(--s1) 0;
    }

    
}