@charset "UTF-8";

/* 変数設定 */
:root {
	--base-font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
    --h1-font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
    --h2-font-size: clamp(1.5rem, -1.019rem + 12.59vw, 10rem);
    --h3-font-size: clamp(1.125rem, 0.866rem + 1.3vw, 2rem);
    --contents-width: 1400px;
    --color-l-gray: #F1F1F1;
    --color-y: #E7E400;
    --color-bk: #000;
    --color-w: #fff;
    --font-jp: "Noto Sans JP", sans-serif;
    --font-en: "Oswald", sans-serif;
    --top-height: 59px;
    --fixednav-height: 99px;
    --center-padding: 2em;
}
body {
    overflow-x: hidden;
}
#top {
    background: var(--color-w);
}
.rotate90 {
    transform: translateX(100%) rotate(90deg);
    transform-origin: top left;
}
.vertical-ttl {
    position: absolute;
    left: 0;
    top: 1em;
    writing-mode: vertical-lr;
    white-space: nowrap;
    line-height: 1;
    font-size: clamp(5rem, 14vw, 12rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    padding-top: 0.1em;
    pointer-events: none;
    z-index: 1;
    height: 0;
    overflow: visible;
}
.txt-center {
    text-align: center;
}
main .note {
    color: var(--color-bk);
}
main {
    font-family: var(--font-jp);
    font-size: var(--base-font-size);
    color: var(--color-bk);
    overflow-x: hidden;
}
section img {
    max-width: 100%;
	height: auto;
}
section h2 { 
    font-family: var(--font-en);
    font-size: var(--h2-font-size);
    font-weight: 500;
}
section h3 {
    font-size: var(--h3-font-size);
    margin-bottom: 1em;
}
.section-inr {
    max-width: var(--contents-width);
    margin: auto;
    box-sizing: border-box;
}
ul {
    list-style: none;
    padding-left: 0;
}

.ticker-container {
    width: 100vw;
    display: flex;
    position: relative;
    left: calc(50% - 50vw);
    overflow: hidden;
}
.flow-r .ticker-container {
    flex-direction: row-reverse;
}
.ticker {
    white-space: nowrap;
    will-change: transform;
}
.flow-l .ticker {
    animation: ticker-l 30s linear infinite both;
}
.flow-r .ticker {
    animation: ticker-r 30s linear infinite both;
}
.slick-list {
    min-width: 300px;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.en {
    font-family: var(--font-en);
}
.icon-inline {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin: 0 0.2em;
}
.txt-link {
    position: relative;
    display: inline-block;
    text-align: center;
}
.txt-link:link,
.txt-link:visited,
.btn-wired:link,
.btn-wired:visited {
    color: var(--color-w);
}
.txt-link:before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: var(--color-w);
    bottom: -5px;
    transform: scaleX(1);
    transition: .3s;
}
.txt-link:hover,
.btn-wired:hover {
    text-decoration: none;
}
.txt-link:hover:before {
    transform: scaleX(.8);
}
.txt-link.txt-link-bk:link,
.txt-link.txt-link-bk:visited {
    color: var(--color-bk);
}
.txt-link.txt-link-bk:before {
    background-color: var(--color-bk);
}
.btn-wired {
    position: relative;
    overflow: hidden;
    display: block;
    border: 2px solid var(--color-w);
    max-width: 240px;
    text-align: center;
    padding: 1em;
    box-sizing: border-box;
    border-radius: 30px;
    margin-top: 2em;
    transition: .4s;
    z-index: 1;
}
.btn-wired:hover {
    color: var(--color-bk);
}
.btn-wired:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-w);
    transform: scaleX(0);
    transition: .3s;
    z-index: -1;
}
.btn-wired:hover:before {
    transform: scaleX(1);
}
[class*="fadeIn"] {
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 1s;
	-o-transition: 1s;
	transition: 1s;
	will-change: opacity, transform;
}
[class*="fadeIn"].is-show {
	opacity: 1;
	visibility: visible;
}
.fadeIn-left {
	-webkit-transform: translateX(-2vw);
    -ms-transform: translateX(-2vw);
    transform: translateX(-2vw);
}
.fadeIn-left.is-show {
	-webkit-transform: translateX(0vw);
    -ms-transform: translateX(0vw);
    transform: translateX(0vw);
}
.fadeIn-right {
	-webkit-transform: translateX(2vw);
    -ms-transform: translateX(2vw);
    transform: translateX(2vw);
}
.fadeIn-right.is-show {
	-webkit-transform: translateX(0vw);
    -ms-transform: translateX(0vw);
    transform: translateX(0vw);
}
.fadeIn-up {
	-webkit-transform: translateY(2vw);
    -ms-transform: translateY(2vw);
    transform: translateY(2vw);
}
.fadeIn-up.is-show {
	-webkit-transform: translateY(0vw);
    -ms-transform: translateY(0vw);
    transform: translateY(0vw);
}
.delay {
	transition-delay: .25s;
}
.delay2 {
	transition-delay: .5s;
}
[class*="gsap"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}
.gsap-scene1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.gsap-scene1 .logo_poitele,
.gsap-scene1 .catch {
    position: absolute;
}
.gsap-scene1 .catch {
    font-size: 6dvw;
    line-height: 1;
    font-weight: bold;
}
.gsap-scene2 .hashtag-list li {
    position: absolute;
}
.gsap-scene2 .hashtag-list li:nth-of-type(1) {
    top: 10vh;
    left: 20vw;
}
.gsap-scene2 .hashtag-list li:nth-of-type(2) {
    top: 5vh;
    right: 30vw;
}
.gsap-scene2 .hashtag-list li:nth-of-type(3) {
    top: 40vh;
    right: 2vw;
}
.gsap-scene2 .hashtag-list li .thumbsup {
    transform: translate(3vw, -3vh);
    max-width: 8vw;
}
.gsap-scene2 .hashtag-list .box{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12vw;
    height: auto;
    aspect-ratio: 4 / 3;
    background: var(--color-w);
    border: 1px solid var(--color-bk);
    box-shadow: 10px 10px 0 0 #d6d6d6;
}
.gsap-scene2 .screen-list li {
    position: absolute;
    max-width: 20vw;
}
.gsap-scene2 .screen-list li:nth-of-type(1) {
    top: 20vh;
    left: 40vw;
}
.gsap-scene2 .screen-list li:nth-of-type(2) {
    top: 40vh;
    left: -2vw;
}
.gsap-scene2 .screen-list li:nth-of-type(3) {
    top: 15vh;
    right: 5vw;
}
.gsap-scene3  {
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1440px) {
    .section-inr {
        padding: 0 2em;
    }
}
@media screen and (max-width: 600px) {
    .vertical-ttl {
        font-size: 4rem;
    }
    section h2 {
        font-size: 12dvw;
    }
    .breadcrumb ul {
        padding: 4% 0;
    }
}
@media screen and (max-width: 768px) {
    h1 {
        margin-left: 0;
    }
}
@media screen and (max-width: 490px) {
    .pc {
        display: none;
    }
}

/* mv */
.mv {
    position: relative;
    background: var(--color-l-gray);
    width: 100%;
    height: calc(100dvh - var(--fixednav-height));
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-yellow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--color-y);
    transform-origin: center center;
    z-index: 0; 
    margin: auto;
}

.mv-copy {
    position: relative;
    z-index: 2;
    transform: translateY(30%);
    margin-bottom: 14em;
    text-align: center;
}
.mv h1 {
    font-size: var(--h1-font-size);
    margin-bottom: 0.25em;
}
.mv-logo img {
    width: clamp(120px, 16vw, 240px);
}


.slogan {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-en);
    font-size: clamp(5rem, 14vw, 12rem);
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    line-height: 1.2;
    transform: translateY(-19%);
    width: 100%;
}
.mv .slogan {
    z-index: 1;
}
.mv-hand {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 60%;
    margin: auto;
}
.mv-hand > img {
    position: relative;
}
.mv-hand .lightning-l,
.mv-hand .lightning-r {
    position: absolute;
    top: 0;
    width: 8%;
}
.mv-hand .lightning-l {
    transform: rotateY(180deg);
    left: 0;
}
.mv-hand .lightning-r {
    right: 0;
}
.coin-l,
.coin-r {
    position: absolute;
    width: 15%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.coin-l li,
.coin-r li {
    text-align: center;
}
.coin-l.stop,
.coin-r.stop {
    position: absolute;
}
.coin-l {
    top: 20vh;
    left: 0;
    z-index: 0;
}
.coin-r {
    top: 15vh;
    right: 0;
    transform: rotateY(180deg);
    z-index: 0;
}
.coin1 {
    animation: floating_y1 ease-in-out infinite 10s;
}
.coin2 {
    animation: floating_y2 ease-in-out infinite 10s;
}
.coin3 {
    animation: floating_y3 ease-in-out infinite 8s;
}
.coin4 {
    animation: floating_y4 ease-in-out infinite 6s;
}
@media screen and (orientation: portrait) {
    .mv-copy {
        margin-bottom: 0;
    }
    .coin-l {
        top: auto;
        bottom: 0;
    }
    .mv-hand {
        max-width: 90%;
    }
    .gsap-scene2 .screen-list li {
        max-width: 25vw;
    }
    .gsap-scene2 .hashtag-list .box {
        width: 20vw;
    }
    .gsap-scene2 .hashtag-list li:nth-of-type(1) {
        top: 15vh;
        left: 10vw;
    }
    .gsap-scene2 .screen-list li {
        max-width: 30vw;
    }
    .gsap-scene2 .screen-list li:nth-of-type(1) {
        top: 25vh;
    }
    .gsap-scene2 .screen-list li:nth-of-type(3) {
        right: -5vw;
    }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .slogan {
        font-size: 4rem;
    }
    .coin-r {
        top: 20vh;
    }
    .gsap-scene2 .screen-list li {
        max-width: 40vw;
    }
    .gsap-scene2 .screen-list li:nth-of-type(1) {
        top: 30vh;
    }
    .gsap-scene2 .screen-list li:nth-of-type(2) {
        left: -7vw;
    }
    .gsap-scene2 .screen-list li:nth-of-type(3) {
        right: -17vw;
    }
    .gsap-scene2 .hashtag-list li:nth-of-type(3) {
        top: 45vh;
    }
    .gsap-scene2 .hashtag-list .box {
        width: 25vw;
    }
    .gsap-scene2 .hashtag-list li .thumbsup {
        max-width: 16vw;
    }
}
@media screen and (min-width: 1920px) {
    .mv {
        height: calc(1920px * 9 / 16 - var(--fixednav-height));
    }
    .mv-hand {
        max-width: 50%;
    }
}
@media screen and (max-width: 1440px) and (orientation: landscape) {
    .mv-copy {
        margin-bottom: 8em;
    }
}
@media screen and (max-width: 1024px) {
    .gsap-scene1 .logo_poitele {
        width: 50%;
        margin: auto;
    }
    .gsap-scene2 .hashtag-list .box {
        width: 15vw;
    }
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .mv {
        height: 680px;
    }
    .mv-copy {
        margin-bottom: 0;
    }
    .coin-l,
    .coin-r {
        width: 10%;
    }
    .coin-l {
        top: 44vh;
    }
    .coin-r {
        top: 34vh;
    }
    .gsap-scene2 .screen-list li:nth-of-type(1) {
        top: 30vh;
    }
    .gsap-scene2 .screen-list li:nth-of-type(2) {
        top: 50vh;
    }
}


/* concept */
.concept {
    background: var(--color-y);
    padding: 10em 0;
    overflow: hidden;
}
.concept .flex_box {
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--center-padding);
}
.concept .txt-container,
.concept .img-container {
    width: calc(50% - var(--center-padding));
}
.concept .img-container {
    transform: translateY(7vh);
}
.concept h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    margin-bottom: 1em;
}
@media screen and (orientation: portrait) {
    .concept .txt-container {
        width: 100%;
    }
    .concept .img-container {
        width: 80%;
        margin-top: 6em;
        transform: translateX(30%);
    }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .concept {
        padding: 6em 0;
    }
    .concept .txt-container {
        width: 91%;
    }
}

/* overview */
.overview {
    background: var(--color-y);
    overflow: hidden;
    padding: 15em 0;
    position: relative;
}
.overview .section-inr {
    position: relative;
    z-index: 1;
}
.overview .flex_box {
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--center-padding);
}
.overview .img-container {
    width: calc(40% - var(--center-padding));
    transform: translateY(7vh);
}
.hand {
    position: relative;
    max-width: 60%;
    margin-left: 6vw;
}
.hand > img {
    position: relative;
    z-index: 1;
}
.screen1,
.screen2,
.screen3,
.screen4,
.hand .lightning {
    position: absolute;
    z-index: 0;
    max-width: 75%;
}
.screen1 {
    top: -7vh;
    left: -5vw;
}
.screen2 {
    top: 2vh;
    right: -10vw;
}
.screen3 {
    bottom: 3vh;
    left: -7vw;
}
.screen4 {
    right: -7vw;
    bottom: -8vh;
    z-index: 1;
}
.hand .thumbsup1,
.hand .thumbsup2,
.hand .thumbsup3 {
    position: absolute;
    z-index: 0;
    max-width: 50%;
}
.hand .thumbsup1 {
    top: 2vh;
    left: -9vw;
}
.hand .thumbsup2 {
    top: -15vh;
    right: 0;
}
.hand .thumbsup3 {
    right: -5vw;
    bottom: 7vh;
}
.hand .lightning {
    top: 0;
    right: 2vw;
    max-width: 20%;
}
.highlight {
    margin-top: 10em;
}
.highlight .slick-list {
    overflow: visible;
}
.highlight .slick-slide {
    background: var(--color-l-gray);
    margin: 0 1em;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2em;
    box-sizing: border-box;
    border-radius: 20px;
}
.highlight h4 {
    font-size: var(--h3-font-size);
    margin-bottom: 1em;
}
.slick-dots {
    display: flex;
    justify-content: center;
    gap: 0 10px;
}
.slick-dots button {
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: 0;
    background: #000;
    opacity: 0.2;
    font-size: 0;
}
.slick-active button {
    opacity: 1;
}
@media screen and (orientation: portrait) {
    .overview .img-container {
        width: 80%;
        margin-top: 6em;
        transform: translateX(30%);
    }
    .screen1 {
        left: -28vw;
    }
    .screen2 {
        right: -18vw;
    }
    .screen3 {
        left: -23vw;
    }
    .screen4 {
        right: -23vw;
    }
    .hand .thumbsup1, .hand .thumbsup2, .hand .thumbsup3 {
        max-width: 40%;
    }
    .hand .thumbsup1 {
        left: -27vw;
    }
    .hand .thumbsup3 {
        right: -20vw;
    }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .overview {
        padding: 8em 0;
    }
}


/* feature */
.feature {
    position: relative;
    width: 100%;
    color: var(--color-w);
    padding: 15em 0;
    overflow: hidden;
}
.feature::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(80px, 12vw, 200px);
    background: linear-gradient(180deg, transparent 0%, #FF4080 100%);
    z-index: 1;
    pointer-events: none;
}
.feature h2 {
    text-align: center;
    color: var(--color-y);
    font-weight: 400;
}
.bg-video {
    position: fixed;
    top: 0;
    overflow: hidden;
    z-index: -1;
    width: 100%;
    height: 100lvh;
}
.bg-video video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    object-fit: cover;
}
.feature-detail {
    padding: 0 2em;
}

/* feature item */
.feature-item {
    margin-bottom: 12em;
}

/* header row: line — num — title — line */
.feature-hd {
    display: flex;
    align-items: center;
    gap: 1.5em;
    margin-bottom: 4em;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.feature-line {
    flex: 0.5;
    height: 1px;
    background: var(--color-y);
    display: block;
}
.num {
    font-size: clamp(3rem, 5vw, 5rem);
    font-family: var(--font-en);
    font-weight: 500;
    line-height: 1;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px var(--color-y);
    flex-shrink: 0;
}
.feature-hd h3 {
    color: var(--color-w);
    font-size: clamp(0.9rem, 1.1vw, 1.5rem);
    font-weight: 700;
    line-height: 1.7;
    margin: 0;
}

/* body: txt + img side by side */
.feature-body {
    display: flex;
    align-items: center;
    gap: 5em;
}
.feature-txt {
    flex: 1;
    color: var(--color-w);
    line-height: 1.9;
    font-size: clamp(0.875rem, 1.1vw, 1.25rem);
}
.feature-txt p {
    max-width: 28em;
    margin: 0 auto;
}
.feature-txt p + p {
    margin-top: 1.5em;
}
.feature-img {
    flex: 0 0 48%;
}
.feature-img picture,
.feature-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* feature2: image on LEFT, text on RIGHT */
.feature2 .feature-body {
    flex-direction: row-reverse;
}

/* feature-other */
.feature-other {
    position: relative;
    padding: 8em 0 0;
    overflow: hidden;
    z-index: 0;
}
.feature-other h3 {
    font-size: var(--h3-font-size);
    color: var(--color-bk);
}
.feature-other p {
    color: var(--color-bk);
}
.feature-other .other-list li {
    background: linear-gradient(
        135deg,
        #1a0a3c 0%,
        #1a0a3c 40%,
        #3d1570 70%,
        #8b2a7a 100%
    );
    backdrop-filter: none;
}
.feature-other .slogan {
    position: relative;
    margin-top: 6em;
}
.spec > .slogan {
    top: auto;
    bottom: 0;
}
.spec > .slogan .ticker,
.feature-other .ticker {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 4px #B5B938;
}
.other-list {
    align-items: stretch;
    gap: 1vw 1vw;
    margin: 5em auto;
    justify-content: center;
}
.other-list li {
    width: 33%;
    padding: 2em;
    box-sizing: border-box;
    max-width: 440px;
    text-align: center;
    border-radius: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bg-glass {
    position: relative;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, .1);
    will-change: backdrop-filter, box-shadow;
    transform: translateZ(0);
}
.other-list .icon {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5em;
}
.other-list .icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.other-list .icon svg {
    overflow: visible;
    max-width: 100%;
    height: auto;
}
.other-list .caption {
    position: static;
    display: block;
    top: auto;
    left: auto;
    padding: 0;
    width: auto;
    background: none;
    color: var(--color-y);
    margin-bottom: 0;
}
@media screen and (max-width: 900px) {
    .feature-hd {
        gap: 1em;
    }
    .feature-hd h3 {
        font-size: 0.85rem;
    }
    .feature-body {
        gap: 3em;
    }
    .feature-img {
        flex: 0 0 45%;
    }
    .other-list li {
        width: 49%;
    }
}
@media screen and (max-width: 600px) {
    .feature {
        padding: 8em 0;
    }
    .feature-hd {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        max-width: 100%;
    }
    .feature-line {
        width: 100%;
        flex: unset;
    }
    .feature-body,
    .feature2 .feature-body {
        flex-direction: column;
        gap: 2em;
    }
    .feature-img {
        flex: unset;
        width: 100%;
    }
    .feature-other {
        padding-top: 5em;
    }
    .other-list li {
        width: 100%;
        padding: 1em;
    }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .feature {
        padding: 8em 0;
    }
    .feature-body,
    .feature2 .feature-body {
        flex-direction: column;
    }
    .feature-img {
        order: -1;
        flex: none;
        width: 60%;
        margin: 0 auto;
    }
    .feature-txt {
        flex: none;
        width: 100%;
    }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .feature-img {
        width: 100%;
    }
    .feature-other {
        overflow: visible;
    }
    .other-list {
        display: grid;
        grid-template-columns: repeat(2, 85%);
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1em;
        justify-content: start;
        width: calc(100% + 2em);
        padding-right: 2em;
        padding-bottom: 1em;
    }
    .other-list li {
        width: auto;
        padding: 1.5em;
    }
    .other-list li:nth-child(1),
    .other-list li:nth-child(4) {
        scroll-snap-align: start;
    }
}


/* case */
.case {
    background: var(--color-y);
    padding: 15em 0;
    position: relative;
}

/* case intro centered header */
.case-intro {
    text-align: center;
    padding: 6em 10% 5em;
    position: relative;
    z-index: 1;
}
.case-intro h3 {
    font-weight: 700;
    margin-bottom: 0.75em;
}
.case-intro p {
    font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
}

/* case-list: grid layout */
.case-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5em 3em;
    margin-bottom: 10em;
    padding: 0 2em;
    position: relative;
    z-index: 1;
}

/* Row 1: case1, case2 — each half width, horizontal (image left + text right) */
.case1 { grid-column: 1 / 4; }
.case2 { grid-column: 4 / 7; }
.case1,
.case2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;
}
.case1 .case-media,
.case2 .case-media {
    flex: 0 0 45%;
}
.case1 .case-txt,
.case2 .case-txt {
    flex: 1;
}

/* Row 2: case3, case4, case5 — each 1/3 width, vertical (image top + text below) */
.case3 { grid-column: 1 / 3; }
.case4 { grid-column: 3 / 5; }
.case5 { grid-column: 5 / 7; }
.case3,
.case4,
.case5 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
}
.case3 .case-media,
.case4 .case-media,
.case5 .case-media {
    width: 80%;
    margin: 0 auto;
}

/* shared case-media / figure */
.case-media {
    margin: 0;
}
.case-media figure {
    margin: 0;
    overflow: hidden;
}
.case1 .case-media figure,
.case2 .case-media figure {
    aspect-ratio: 4 / 3;
}
.case3 .case-media figure,
.case4 .case-media figure,
.case5 .case-media figure {
    aspect-ratio: 16 / 9;
}
.case-media figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* case text */
.case-item h4 {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
    font-weight: 700;
    margin-bottom: 0.5em;
}
.case-item p {
    font-size: 0.9em;
    line-height: 1.8;
}
.case-item .device-badges {
    justify-content: flex-start;
    margin-bottom: 0.6em;
}
.case .ticker {
    -webkit-text-fill-color: transparent; /* （順序に関係なく）色を上書きする */
    -webkit-text-stroke: 4px #B5B938;
}
@media screen and (orientation: portrait) {
    .case3 .case-media,
    .case4 .case-media,
    .case5 .case-media {
        width: 100%;
        margin: 0;
    }
}
@media screen and (min-width: 1920px) {
    .case .vertical-ttl,
    .overview .vertical-ttl {
        left: 260px;
    }
}
.case .flow-l {
    top: 0;
}
.case .flow-r {
    top: 57%;
}
/* case background illustrations */
.case-bg-illust {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: multiply;
}
.bg-illust {
    position: absolute;
    opacity: 0.3;
    mix-blend-mode: multiply;
}
.bg-illust-1 {
    width: clamp(80px, 9.4vw, 180px);
    top: 73%;
    right: 0;
}
.bg-illust-2 {
    width: clamp(140px, 15.7vw, 301px);
    top: 16%;
    left: 17%;
}
.bg-illust-3 {
    width: clamp(100px, 12.2vw, 235px);
    top: 10%;
    left: 69%;
}
.bg-illust-4 {
    width: clamp(180px, 20.6vw, 395px);
    top: 30%;
    left: 88%;
}
.bg-illust-5 {
    width: clamp(100px, 11.7vw, 224px);
    top: 29%;
    left: -44px;
}
.bg-illust-6 {
    width: clamp(160px, 19vw, 364px);
    top: 74%;
    left: -63px;
}
/* case responsive */
@media screen and (max-width: 900px) {
    .case-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 3em 2em;
    }
    .case1 { grid-column: 1 / 2; }
    .case2 { grid-column: 2 / 3; }
    .case3 { grid-column: 1 / 2; }
    .case4 { grid-column: 2 / 3; }
    .case5 { grid-column: 1 / 3; }
    /* case5 on wide 2-col: use horizontal layout */
    .case5 {
        flex-direction: row;
        align-items: center;
    }
    .case5 .case-media {
        flex: 0 0 45%;
    }
    /* case1, case2: stack on narrow */
    .case1,
    .case2 {
        flex-direction: column;
        align-items: flex-start;
    }
    .case1 .case-media,
    .case2 .case-media {
        flex: unset;
        width: 100%;
    }
}
@media screen and (max-width: 600px) {
    .case-list {
        grid-template-columns: 1fr;
        gap: 2.5em;
        padding: 0 1em;
    }
    .case1, .case2, .case3, .case4, .case5 {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: flex-start;
    }
    .case5 .case-media {
        flex: unset;
        width: 100%;
    }
    .case .ticker,
    .spec > .slogan .ticker,
    .feature-other .ticker {
        -webkit-text-stroke: 1px #B5B938;
    }
    .bg-illust-1 {
        width: clamp(60px, 17vw, 100px);
    }
    .bg-illust-2 {
        width: clamp(100px, 29vw, 160px);
    }
    .bg-illust-3 {
        width: clamp(80px, 23vw, 130px);
    }
    .bg-illust-4 {
        width: clamp(120px, 38vw, 220px);
    }
    .bg-illust-5 {
        width: clamp(80px, 22vw, 125px);
    }
    .bg-illust-6 {
        width: clamp(120px, 35vw, 200px);
    }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .case { padding: 8em 0; }
    .bg-illust-1 { width: clamp(96px, 11vw, 216px); }
    .bg-illust-2 { width: clamp(168px, 19vw, 361px); }
    .bg-illust-3 { width: clamp(120px, 15vw, 282px); }
    .bg-illust-4 { width: clamp(216px, 25vw, 474px); }
    .bg-illust-5 { width: clamp(120px, 14vw, 269px); }
    .bg-illust-6 { width: clamp(192px, 23vw, 437px); }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .case-intro {
        text-align: left;
        padding-top: 4em;
        padding-right: 0;
        margin-left: 3em;
    }
    .case1 .case-media,
    .case2 .case-media,
    .case3 .case-media,
    .case4 .case-media,
    .case5 .case-media {
        width: 80%;
        margin: 0 auto;
    }
    .bg-illust-1 { width: clamp(96px, 11vw, 216px); top: 88%; }
    .bg-illust-2 { width: clamp(140px, 19vw, 361px); top: 10%; left: 7%; }
    .bg-illust-3 { width: clamp(120px, 15vw, 282px); top: 2%; }
    .bg-illust-4 { width: clamp(216px, 25vw, 474px); top: 40%; left: 70%; }
    .bg-illust-5 { width: clamp(100px, 14vw, 269px); top: 21%; left: auto; right: -20px; }
    .bg-illust-6 { width: clamp(192px, 23vw, 437px); top: 54%; left: auto; right: -60px; }
}

.bland {
    padding: 5em 0;
    text-align: center;
    color: var(--color-w);
}
.bland .xit_logo {
    display: inline-block;
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(266deg) brightness(107%) contrast(104%);
    margin: 0 auto 2em;
    max-width: 25%;
}
.bland-slogan {
    font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
}
.breadcrumb.ft_bread01 {
    background: var(--color-l-gray);
    margin: 0;
}

/* connect-section (in overview) */
.connect-section {
    margin-top: 10em;
}
.connect-section .note {
    text-align: right;
    max-width: calc(480px * 2 + 2em);
    margin: 0 auto;
}
.connect-intro {
    padding: 0 10%;
    margin-bottom: 0.5em;
}
.connect-section h3 {
    margin-bottom: 0.5em;
}
.connect-diagram {
    max-width: 900px;
    margin: 3em auto;
    text-align: center;
}
.connect-diagram img {
    width: 100%;
    height: auto;
}
.connect-cards {
    display: flex;
    gap: 2em;
    justify-content: center;
    margin-top: 3em;
    flex-wrap: wrap;
}
.connect-card {
    flex: 1;
    min-width: 280px;
    max-width: 480px;
    padding: 2.5em 2em;
    border-radius: 20px;
    text-align: center;
    box-sizing: border-box;
    background: linear-gradient(
        135deg,
        #1a0a3c 0%,
        #1a0a3c 40%,
        #3d1570 70%,
        #8b2a7a 100%
    );
    color: var(--color-w);
    backdrop-filter: none;
}
.connect-card h4 {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    margin-bottom: 0.75em;
    color: var(--color-w);
}
.connect-card p {
    color: var(--color-w);
    font-size: 0.9em;
    line-height: 1.8;
}
.connect-icon {
    max-width: 60px;
    margin: 0 auto 1em;
    overflow: visible;
}
.connect-icon img {
    width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
}
.connect-icon svg {
    overflow: visible;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .connect-diagram {
        max-width: 70%;
    }
    .connect-section {
        margin-top: 0;
    }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .connect-diagram {
        max-width: 100%;
    }
    .connect-intro {
        padding-top: 0;
        padding-right: 0;
        margin-left: 3em;
    }
    .connect-intro h3,
    .connect-intro p {
        text-align: left;
    }
    .overview {
        overflow: visible;
    }
    .connect-cards {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-right: -2em;
        padding-right: 2em;
        padding-bottom: 1em;
    }
    .connect-card {
        flex: 0 0 90%;
        min-width: unset;
        max-width: unset;
        scroll-snap-align: start;
    }
}

/* poipoint section */
.poipoint {
    background: var(--color-y);
    padding: 10em 0;
    overflow: hidden;
}
.poipoint-box {
    position: relative;
    padding: 3em 0;
    max-width: 80%;
    margin: 0 auto 3em;
}
.poipoint-ttl {
    font-size: clamp(1.25rem, 0.9rem + 1.75vw, 2.25rem);
    font-family: var(--font-jp);
    font-weight: bold;
    margin-bottom: 1em;
}
.poipoint .section-inr > p {
    margin-bottom: 3em;
}
.point-flow {
    display: flex;
    gap: 4em;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 2em auto;
    flex-wrap: wrap;
}
.point-steps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.point-step {
    display: flex;
    align-items: center;
    gap: 1.5em;
    min-width: 300px;
    font-weight: bold;
}
.step-icon {
    width: 96px;
    flex-shrink: 0;
}
.step-icon img {
    width: 100%;
    height: auto;
}
.step-arrow {
    width: 96px;
    text-align: center;
    align-self: center;
}
.arrow-line {
    opacity: 0;
}
.flow-arrow.fired .arrow-line {
    animation: arrow-flow 2.5s ease-in-out infinite;
}
.flow-arrow.fired .arrow-line:nth-child(2) {
    animation-delay: 0.3s;
}
@keyframes arrow-flow {
    0%   { opacity: 0; transform: translateY(-4px); }
    35%  { opacity: 1; transform: translateY(0); }
    70%  { opacity: 0; transform: translateY(4px); }
    100% { opacity: 0; transform: translateY(4px); }
}
.speed-tri1,
.speed-tri2 {
    opacity: 0;
}
.speed-tri1 {
    animation: tri-flow 2.5s ease-in-out infinite;
}
.speed-tri2 {
    animation: tri-flow 2.5s ease-in-out 0.3s infinite;
}
.scene-arrow1, .scene-arrow2, .scene-arrow3 { opacity: 0; }
.scene-arrow1 { animation: arrow-fade 2.5s ease-in-out infinite; }
.scene-arrow2 { animation: arrow-fade 2.5s ease-in-out 0.3s infinite; }
.scene-arrow3 { animation: arrow-fade 2.5s ease-in-out 0.6s infinite; }
.chapter-line1 { animation: seekbar-blink 3s ease-in-out infinite; }
.chapter-line2 { animation: seekbar-blink 3s ease-in-out infinite; }
.hdd-circle { animation: seekbar-blink 1.2s ease-in-out infinite; }
.draw-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
/* device draw loop (5s cycle: draw 0-1.6s, hold 1.6-4.3s, reset) */
@keyframes dev-tablet-loop {
    0%     { stroke-dashoffset: 1; }
    30%    { stroke-dashoffset: 0; }
    86%    { stroke-dashoffset: 0; }
    86.1%  { stroke-dashoffset: 1; }
    100%   { stroke-dashoffset: 1; }
}
@keyframes dev-tablet-line-loop {
    0%     { stroke-dashoffset: 1; }
    18%    { stroke-dashoffset: 1; }
    26%    { stroke-dashoffset: 0; }
    86%    { stroke-dashoffset: 0; }
    86.1%  { stroke-dashoffset: 1; }
    100%   { stroke-dashoffset: 1; }
}
@keyframes dev-phone-loop {
    0%     { stroke-dashoffset: 1; }
    6%     { stroke-dashoffset: 1; }
    30%    { stroke-dashoffset: 0; }
    86%    { stroke-dashoffset: 0; }
    86.1%  { stroke-dashoffset: 1; }
    100%   { stroke-dashoffset: 1; }
}
@keyframes dev-phone-line-loop {
    0%     { stroke-dashoffset: 1; }
    24%    { stroke-dashoffset: 1; }
    32%    { stroke-dashoffset: 0; }
    86%    { stroke-dashoffset: 0; }
    86.1%  { stroke-dashoffset: 1; }
    100%   { stroke-dashoffset: 1; }
}
.icon-device-svg #dev-tablet      { animation: dev-tablet-loop      4s ease-in-out infinite; }
.icon-device-svg #dev-tablet-line { animation: dev-tablet-line-loop  4s ease-in-out infinite; }
.icon-device-svg #dev-phone       { animation: dev-phone-loop        4s ease-in-out infinite; }
.icon-device-svg #dev-phone-line  { animation: dev-phone-line-loop   4s ease-in-out infinite; }
.icon-outdoor-svg { animation: icon-fly 2.5s ease-in-out infinite; }
@keyframes icon-fly {
    0%   { transform: translate(-4px, 8px); opacity: 0; }
    15%  { transform: translate(-4px, 8px); opacity: 1; }
    80%  { transform: translate(4px, -6px); opacity: 1; }
    95%  { transform: translate(4px, -6px); opacity: 0; }
    100% { transform: translate(-4px, 8px); opacity: 0; }
}
.signal-inner, .signal-mid, .signal-outer { opacity: 0; }
.signal-inner { animation: signal-inner 2.5s ease-in-out infinite; }
.signal-mid   { animation: signal-mid   2.5s ease-in-out 0.4s infinite; }
.signal-outer { animation: signal-outer 2.5s ease-in-out 0.8s infinite; }
@keyframes signal-inner {
    0%  { opacity: 0; }
    15% { opacity: 1; }
    75% { opacity: 1; }
    83% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes signal-mid {
    0%  { opacity: 0; }
    15% { opacity: 1; }
    57% { opacity: 1; }
    67% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes signal-outer {
    0%  { opacity: 0; }
    15% { opacity: 1; }
    40% { opacity: 1; }
    50% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes arrow-fade {
    0%   { opacity: 0; }
    35%  { opacity: 1; }
    70%  { opacity: 0; }
    100% { opacity: 0; }
}
.seekbar-fill {
    animation: seekbar-blink 3s ease-in-out infinite;
}
@keyframes seekbar-blink {
    0%   { opacity: 1; }
    32%  { opacity: 0; }
    65%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes tri-flow {
    0%   { opacity: 0; transform: translateX(-3px); }
    35%  { opacity: 1; transform: translateX(0); }
    70%  { opacity: 0; transform: translateX(3px); }
    100% { opacity: 0; transform: translateX(3px); }
}
@property --radar-deg {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@property --radar-deg {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.replay-arrow {
    --radar-deg: 0deg;
    mask-image: conic-gradient(from 270deg at 50% 56%, transparent calc(360deg - var(--radar-deg)), #000 calc(360deg - var(--radar-deg)));
    -webkit-mask-image: conic-gradient(from 270deg at 50% 56%, transparent calc(360deg - var(--radar-deg)), #000 calc(360deg - var(--radar-deg)));
    animation: radar-reveal 3s ease-in-out infinite;
}
@keyframes radar-reveal {
    0%   { --radar-deg: 0deg; }
    65%  { --radar-deg: 360deg; }
    100% { --radar-deg: 360deg; }
}
.point-mockup {
    max-width: 340px;
    flex-shrink: 0;
}
.point-mockup img {
    width: 100%;
    height: auto;
    border-radius: 20px;
}
.exchange-lead {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: bold;
    margin: 0 0 2em;
}
.exchange-card {
    margin: 0 auto;
    text-align: center;
}
.exchange-card picture img {
    max-width: 100%;
    height: auto;
}
.dotmoney {
    margin-top: 2em;
    padding-top: 2em;
    border-top: 1px solid #e0e0e0;
    font-size: 0.9em;
}
.poipoint .note {
    margin-top: 2em;
    font-size: 0.75em;
    line-height: 1.8;
}
.poipoint .btn-wired {
    margin: 2em auto 0;
    border-color: var(--color-bk);
    color: var(--color-bk);
    max-width: 240px;
}
.poipoint .btn-wired:hover {
    color: var(--color-w);
}
.poipoint .btn-wired:before {
    background: var(--color-bk);
}

/* exchange arrow drawing animation */
.exchange-arrow {
    position: absolute;
    bottom: -3em;
    left: 7em;
    width: clamp(30px, 4vw, 50px);
    pointer-events: none;
}
.exchange-arrow svg {
    width: 100%;
    height: auto;
    overflow: visible;
}
.exchange-arrow path {
    fill: none;
    stroke: var(--color-bk);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
.exchange-main { animation: exchange-main 2.5s ease-in-out infinite; }
.exchange-tip1  { animation: exchange-tip1  2.5s ease-in-out infinite; }
.exchange-tip2  { animation: exchange-tip2  2.5s ease-in-out infinite; }

@keyframes exchange-main {
    0%  { stroke-dashoffset: 1; }
    60% { stroke-dashoffset: 0; }
    90% { stroke-dashoffset: 0; }
    91% { stroke-dashoffset: 1; }
    100%{ stroke-dashoffset: 1; }
}
@keyframes exchange-tip1 {
    0%, 50% { stroke-dashoffset: 1; }
    65%     { stroke-dashoffset: 0; }
    90%     { stroke-dashoffset: 0; }
    91%     { stroke-dashoffset: 1; }
    100%    { stroke-dashoffset: 1; }
}
@keyframes exchange-tip2 {
    0%, 55% { stroke-dashoffset: 1; }
    70%     { stroke-dashoffset: 0; }
    90%     { stroke-dashoffset: 0; }
    91%     { stroke-dashoffset: 1; }
    100%    { stroke-dashoffset: 1; }
}
.poipoint-homeparty {
    position: absolute;
    right: -28%;
    top: 85%;
    transform: translateY(-50%);
    width: clamp(240px, 27vw, 450px);
    opacity: 0.3;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}
.poipoint-homeparty img {
    width: 100%;
    height: auto;
}
@media screen and (orientation: portrait) {
    .point-flow {
        flex-direction: column;
        align-items: center;
    }
    .point-step {
        min-width: auto;
        width: 100%;
    }
}
@media screen and (max-width: 1440px) {
    .poipoint-homeparty { right: -12%; }
}
@media screen and (max-width: 1024px) {
    .point-flow {
        padding: 0;
    }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .exchange-arrow { left: 5em; }
    .point-mockup { max-width: 80%; }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .exchange-arrow { left: 2em; }
    .point-step { gap: 0.5em; }
    .poipoint-homeparty {
        right: -25%;
        width: clamp(210px, 27vw, 450px);
    }
}
@media screen and (max-width: 430px) {
    .point-mockup { max-width: 100%; }
}

/* case section - device badges */
.device-badges {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    margin-bottom: 0.75em;
    flex-wrap: wrap;
}
.device-badges li {
    background: var(--color-bk);
    color: var(--color-y);
    font-family: var(--font-en);
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.2em 0.5em;
    line-height: 1;
}

/* feature section - new styles */
.feature-lead {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    font-family: var(--font-jp);
    color: var(--color-w);
    margin: 0.5em 0 3em;
}

/* spec section */
.spec {
    position: relative;
    overflow: hidden;
    padding: 15em 0;
    background-color: var(--color-y);
    background-image: linear-gradient(180deg, #FF4080 0%, transparent 20%);
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .spec { padding: 8em 0; }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .spec { overflow: visible; }
}

/* recording section */
.recording-section {
    padding: 10em 2em 8em;
    position: relative;
    z-index: 1;
}
.recording-section h3 {
    font-size: var(--h3-font-size);
    color: var(--color-bk);
    margin-bottom: 3em;
}
.recording-body {
    width: fit-content;
    margin: 0 auto;
}
.recording-flex {
    display: flex;
    gap: 2em;
    align-items: flex-start;
    justify-content: center;
}
.recording-cards {
    display: contents;
}
.recording-hdd,
.recording-cloud {
    flex: 1;
    max-width: 380px;
    color: var(--color-w);
    text-align: center;
}
.recording-hdd {
    order: 1;
}
.recording-product {
    flex-shrink: 0;
    width: clamp(100px, 13vw, 160px);
    align-self: center;
    order: 2;
}
.recording-cloud {
    order: 3;
}
.recording-product img {
    width: 100%;
    height: auto;
}
.recording-circle {
    width: clamp(160px, 18vw, 220px);
    height: clamp(160px, 18vw, 220px);
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #1a0a3c 0%,
        #1a0a3c 40%,
        #3d1570 70%,
        #8b2a7a 100%
    );
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto 2em;
    padding: 1.5em;
    box-sizing: border-box;
    color: var(--color-y);
}
.recording-label {
    font-size: 0.8em;
    margin-top: 0;
    margin-bottom: 0.25em;
    color: var(--color-y);
}
.recording-type {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--color-y);
    margin-top: 0;
    margin-bottom: 0.5em;
}
.recording-icon {
    width: clamp(70px, 7vw, 90px);
    margin: 0 auto;
}
/* cloud draw loop (5s cycle: draw 0-2s, hold 2-4.3s, reset) */
@keyframes cloud-draw-loop {
    0%     { stroke-dashoffset: 1; }
    40%    { stroke-dashoffset: 0; }
    86%    { stroke-dashoffset: 0; }
    86.1%  { stroke-dashoffset: 1; }
    100%   { stroke-dashoffset: 1; }
}
.cloud-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: cloud-draw-loop 4s ease-in-out infinite;
}
.recording-icon img,
.recording-icon svg {
    width: 100%;
    height: auto;
    overflow: visible;
}
.recording-spec {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    flex-wrap: nowrap;
    margin-bottom: 1.5em;
}
.rec-badge {
    background: transparent;
    border: 1px solid #300667;
    color: #300667;
    padding: 0.3em 1em;
    font-size: clamp(0.7rem, 0.65rem + 0.25vw, 0.85rem);
    white-space: nowrap;
    display: inline-block;
}
.rec-badge em {
    font-style: normal;
    font-weight: bold;
    font-size: 1.4em;
}
.recording-hdd h4,
.recording-cloud h4 {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: 700;
    margin-bottom: 0.75em;
    color: var(--color-bk);
    text-align: center;
}
.recording-hdd p,
.recording-cloud p {
    line-height: 1.8;
    color: var(--color-bk);
    text-align: left;
}
.recording-circle p {
    color: var(--color-y);
    line-height: 1.5;
}
.recording-section .note {
    margin-top: 3em;
    font-size: 0.75em;
    color: var(--color-bk);
    line-height: 1.8;
}
@media screen and (orientation: portrait) {
    .recording-body {
        width: 100%;
    }
    .recording-flex {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .recording-product {
        order: -1;
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
    }
    .recording-product img {
        max-width: 15%;
    }
    .recording-hdd,
    .recording-cloud {
        flex: 1;
        max-width: none;
    }
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .recording-section {
        padding: 0;
    }
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .recording-spec {
        flex-direction: column;
        align-items: center;
    }
    .recording-section {
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .recording-product img { max-width: 30%; }
    .recording-section {
        padding-left: 0;
        padding-right: 0;
    }
    .recording-cards {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-right: -2em;
        padding-right: 2em;
        padding-bottom: 1em;
        gap: 2em;
        flex: 1;
    }
    .recording-hdd,
    .recording-cloud {
        flex: 0 0 90%;
        max-width: unset;
        scroll-snap-align: start;
    }
}

/* step-section
-------------------- */
.step-section {
    background: var(--color-y);
    padding: 4em 0 5em;
    text-align: center;
}
.step-catch {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.25em;
}
.step-logo {
    margin-bottom: 2.5em;
}
.step-logo img {
    height: 2.5rem;
    width: auto;
}
.step-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2em;
    list-style: none;
    padding: 0;
    margin: 0;
}
.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
}
.step-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--color-bk);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.step-circle img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
.step-label {
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    margin: 0;
}
.step-num {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.step-num em {
    font-style: normal;
    font-size: 1rem;
}
.step-arrow-sep {
    font-size: 1.5rem;
    font-weight: 700;
    list-style: none;
    align-self: center;
    margin-top: -1.5em;
}
@media (max-width: 816px) {
    .step-list {
        gap: 1em;
    }
    .step-circle {
        width: 80px;
        height: 80px;
    }
    .step-circle img {
        width: 36px;
        height: 36px;
    }
}

/* whats-train (overview decorative)
-------------------- */
.whats-train {
    position: absolute;
    top: 13em;
    right: 0;
    width: clamp(300px, 38vw, 570px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
    mix-blend-mode: multiply;
}
.whats-train img {
    width: 100%;
    height: auto;
}
.whats-bathtub {
    position: absolute;
    bottom: 0;
    left: -100px;
    width: clamp(240px, 30vw, 480px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
    mix-blend-mode: multiply;
}
.whats-bathtub img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 1024px) and (orientation: portrait) {
    .whats-train { width: clamp(346px, 43vw, 656px); right: -18%; top: 5em; }
    .whats-bathtub { width: clamp(276px, 35vw, 553px); }
}
@media screen and (max-width: 490px) and (orientation: portrait) {
    .whats-train {
        top: 2em;
        right: -24%;
        width: clamp(200px, 38vw, 570px);
    }
    .whats-bathtub {
        width: clamp(200px, 30vw, 480px);
    }
}

/* keyframes
-------------------- */
@keyframes ticker-l {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes ticker-r {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
@keyframes floating_y1 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6vh);
	}
}
@keyframes floating_y2 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6vh);
	}
}
@keyframes floating_y3 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4vh);
	}
}
@keyframes floating_y4 {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(2vh);
	}
}