@charset "UTF-8";

/* --- Variables --- */
:root {
    --main-orange: #FF8C00;
    --sub-black: #222222;
    --accent-yellow: #FFCC00;
    --text-color: #333333;
    --bg-white: #ffffff;
    --font-base: 'M PLUS Rounded 1c', sans-serif;
}

/* --- Reset & Base --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* Prevent iOS bounce scroll bug and sizing */
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    /* No overflow-x hidden on root to allow native scrolling. We use .site-wrapper for overflow control. */
    background: var(--bg-white);
    font-family: var(--font-base);
    color: var(--text-color);
    line-height: 1.6;
    position: relative;
    /* Important for iOS: allow standard pan and zoom */
    touch-action: auto;
}

/* Prevent horizontal scroll without breaking iOS vertical scroll */
.site-wrapper {
    overflow: clip;
    overflow-x: clip;
    width: 100%;
    position: relative;
    /* Hardware acceleration for smooth scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-pad {
    padding: 60px 0;
}

/* Section Head */
.section-head {
    text-align: center;
    margin-bottom: 40px;
}

.section-head .en {
    display: block;
    font-size: 2rem;
    color: #ccc;
    font-weight: bold;
}

.section-head .ja {
    font-size: 3rem;
    color: var(--main-orange);
    font-weight: 900;
    background: linear-gradient(transparent 70%, #ffebcd 70%);
    display: inline-block;
}

.section-head .ja-ok {
    font-size: 4rem;
}

.section-head .mini-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: rgb(255, 255, 255);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.section-head.white .ja {
    color: white;
    background: none;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.section-head.white .en {
    color: rgba(255, 255, 255, 0.7);
}

/* --- Header & Nav (Wavy & Hanging) --- */
#header {
    position: relative;
    z-index: 100;
}

.header__wave {
    width: 100%;
    height: 60px;
    background: var(--main-orange);
    position: relative;
}

.header__wave svg {
    position: absolute;
    bottom: -48px;
    /* 波の下への突き出し */
    left: 0;
    width: 100%;
    height: 50px;
    filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.1));
}

.nav-item {
    text-align: center;
    position: relative;
    top: 10px;
    transition: transform 0.3s;
}

.nav-item:hover {
    transform: translateY(10px);
}

/* 紐 */
.nav-item::before {
    content: '';
    display: block;
    width: 2px;
    height: 30px;
    background: #fff;
    margin: 0 auto;
}

.nav-item a {
    display: block;
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
}

.nav-icon {
    width: 60px;
    height: 50px;
    background: #D9333F;
    /* 赤系アフロ色 */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    /* アフロ型 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 5px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    position: relative;
}

/* アフロのモコモコ感 */
.nav-icon::after,
.nav-icon::before {
    content: '';
    position: absolute;
    background: #D9333F;
    border-radius: 50%;
}

.nav-icon::before {
    width: 20px;
    height: 20px;
    top: -5px;
    left: 5px;
}

.nav-icon::after {
    width: 20px;
    height: 20px;
    top: -5px;
    right: 5px;
}

/* Pick Up Section */
.pickup-section {
    background: #fff;
    text-align: center;
}

.pickup-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--main-orange);
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.video-msg {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 30px;
    line-height: 1.6;
}

.video-container-wrap {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

/* Instagram用調整 */
.video-container-wrap.instagram-wrap {
    max-width: 400px;
    /* リール動画の幅に合わせる */
    display: flex;
    justify-content: center;
}

.instagram-wrap .instagram-media {
    margin: 0 auto !important;
    /* 強制中央寄せ */
    min-width: unset !important;
    max-width: 100% !important;
    width: 100% !important;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 5px solid var(--sub-black);
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* --- Profile (Instagram Story UI) --- */
#profile {
    background: #fff;
    padding: 40px 0 60px;
    color: #111;
}

.story-section-head {
    text-align: center;
    margin-bottom: 24px;
    font-size: 3rem;
    font-weight: 700;
}

.is-title-wrap {
    width: 100%;
    text-align: center;
    margin-bottom: 24px;
}

/* ===== Below-Story CTA Button ===== */
.is-below-btn-wrap {
    text-align: center;
    margin-top: 48px;
}


.is-below-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--main-orange);
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 16px 40px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(235, 126, 62, 0.45);
    transition: transform 0.2s, box-shadow 0.2s;
}

.is-below-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(235, 126, 62, 0.6);
    color: #fff;
}

/* ===== Story Container ===== */

.is-story-container {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 9/16;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    background: #000;
    font-family: var(--font-base);
    user-select: none;
    -webkit-user-select: none;
}

/* ===== Tap Navigation ===== */
.is-story-nav {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    z-index: 50;
    cursor: pointer;
}

.is-nav-prev {
    left: 0;
}

.is-nav-next {
    right: 0;
}

/* ===== Progress Bars ===== */
.is-progress-wrap {
    position: absolute;
    top: 12px;
    left: 10px;
    right: 10px;
    z-index: 60;
    display: flex;
    gap: 4px;
}

.is-progress-item {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    overflow: hidden;
}

.is-progress-fill {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 3px;
}

/* ===== Header Info (Avatar + name) ===== */
.is-header-info {
    position: absolute;
    top: 24px;
    left: 12px;
    right: 12px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}

.is-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.65);
    object-fit: cover;
    flex-shrink: 0;
}

.is-account {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.is-username {
    font-size: 0.82rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.is-time {
    font-size: 0.72rem;
    opacity: 0.8;
}

.is-close {
    font-size: 1.2rem;
    opacity: 0.85;
    cursor: pointer;
}

/* ===== Slides ===== */
.is-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
}

.is-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* allow link sticker to be tapped */
}

/* Background image layer */
.is-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    z-index: 1;
}

.is-bg-dark {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
}

/* Gradient overlay */
.is-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0.15) 100%);
    z-index: 2;
}

/* ===== Body Content ===== */
.is-body {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 20px 30px;
    color: #fff;
}

.is-body-center {
    justify-content: center;
    text-align: center;
}

.is-body-cta {
    justify-content: space-between;
    padding-top: 80px;
}

/* ===== Per-slide body positioning overrides ===== */
/* Slide 2: text above the 🔥 gif stamp (bottom: 140px) */
#is-slide-1 .is-body {
    justify-content: flex-end;
    text-align: center;
    padding-bottom: 170px;
}

/* Slide 3, 4 & 5: lower third (content sits at ~bottom 33% area) */
#is-slide-2 .is-body,
#is-slide-3 .is-body,
#is-slide-4 .is-body {
    justify-content: flex-end;
    padding-bottom: 60px;
}

/* Slide 6: split top and bottom center */
#is-slide-5 .is-body {
    justify-content: space-between;
    text-align: center;
    padding-bottom: 40px;
}

/* ===== Stamps ===== */
.is-stamp {
    position: absolute;
    z-index: 20;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.is-hashtag-stamp {
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    top: 110px;
    right: 16px;
    transform: rotate(3deg);
}

.s-top-right-2 {
    top: 150px;
    transform: rotate(-2deg);
}

.is-gif-stamp {
    background: linear-gradient(to right, #ff6348, #e84393);
    color: #fff;
    bottom: 140px;
    right: 16px;
    transform: rotate(-5deg);
    font-size: 0.9rem;
}

.is-location-stamp {
    background: #fff;
    color: #333;
    top: 110px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
}

.is-location-stamp i {
    color: var(--main-orange);
}

.is-mention-stamp {
    background: linear-gradient(to right, #f58529, #dd2a7b, #8134af, #515bd4);
    color: #fff;
    top: 110px;
    right: 16px;
    transform: rotate(2deg);
    font-size: 0.9rem;
}

/* ===== Text Elements ===== */
.is-text-block {
    font-size: 0.95rem;
    line-height: 1.8;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

.is-strong-text {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 14px;
    text-shadow: 2px 2px 0 #000, 0 0 12px rgba(0, 0, 0, 0.8);
}

.is-zabuton {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    padding: 18px 20px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 2;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.is-zabuton strong {
    color: var(--accent-yellow);
}

.is-slide-label {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}

.is-big-text {
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 16px;
    text-shadow: 2px 2px 0 #000;
}

.is-climax-text {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 200, 0, 0.3);
    margin-bottom: 24px;
}

.is-sub-climax {
    font-size: 1.1rem;
    opacity: 0.85;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
}

.is-cta-intro {
    font-size: 1rem;
    line-height: 1.8;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9);
    margin-bottom: 12px;
}

.is-final-text {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.4;
    text-shadow: 2px 2px 0 #000, 0 0 15px rgba(255, 200, 0, 0.5);
    color: #fff;
    margin-bottom: 24px;
    letter-spacing: 0.05em;
}

.is-final-text span.is-small-hl {
    font-size: 1.6rem;
}

.is-highlight-marker {
    background: linear-gradient(transparent 60%, var(--main-orange) 60%);
    display: inline;
    padding: 0 4px;
}

/* ===== Typewriter ===== */
.is-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #fff;
    width: 0;
    font-size: 1.6rem;
    font-weight: 900;
    text-shadow: 2px 2px 0 #000;
    margin-bottom: 16px;
}

.is-slide.active .is-typewriter {
    animation: isTyping 1.8s steps(14, end) forwards, isCaretBlink 0.75s step-end infinite;
}

@keyframes isTyping {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes isCaretBlink {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #fff;
    }
}

/* ===== Fade Up Animation ===== */
.is-fade-up {
    opacity: 0;
    transform: translateY(24px);
    animation: none;
}

.is-slide.active .is-fade-up {
    animation: isFadeUp 0.8s ease-out 0.3s forwards;
}

.is-slide.active .is-fade-up.delay-1 {
    animation-delay: 1s;
}

@keyframes isFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Link Sticker (Slide 6) ===== */
.is-link-sticker {
    position: relative;
    z-index: 80;
    /* above tap nav */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #0077cc;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 11px 24px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    align-self: center;
    transition: transform 0.2s;
}

.is-link-sticker:hover {
    transform: scale(1.05);
    color: #0055aa;
}

/* Swipe up hint */
.is-swipe-up {
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.7;
    letter-spacing: 0.1em;
    margin-top: 8px;
    animation: bounce 1.6s infinite;
}

@keyframes bounce {

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

    30% {
        transform: translateY(-6px);
    }
}







.cinematic-scene {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
    font-size: 1.05rem;
    line-height: 2.2;
    letter-spacing: 0.05em;
    pointer-events: none;
    /* Black stroke (outline) for readability */
    text-shadow:
        1px 1px 0 #000,
        -1px 1px 0 #000,
        1px -1px 0 #000,
        -1px -1px 0 #000,
        0 2px 4px rgba(0, 0, 0, 0.8);
}

.cinematic-scene.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.story-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.story-bg.active {
    opacity: 1;
}

.story-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient from bottom (darker) to top (lighter) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 2;
}

/* Header UI */
.story-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.story-progress-container {
    display: flex;
    gap: 5px;
    margin-bottom: 12px;
}

.story-progress-item {
    flex: 1;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.story-progress-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #fff;
    width: 0%;
}

/* Active bar animation */
.story-progress-item.active::before {
    animation: storyProgress 8s linear forwards;
}

/* Completed bars stay full */
.story-progress-item.completed::before {
    width: 100%;
    animation: none;
}

@keyframes storyProgress {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.story-header-info {
    display: flex;
    align-items: center;
}

.story-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.story-account {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.story-username {
    font-weight: 700;
    font-size: 0.9rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    margin-right: 8px;
}

.story-time {
    font-size: 0.75rem;
    opacity: 0.8;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.story-action-icon {
    font-size: 1.2rem;
    cursor: pointer;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Content Stamps */
.story-stamp {
    background: white;
    color: #333;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transform: rotate(-3deg);
}

.story-stamp i {
    margin-right: 6px;
    color: var(--main-orange);
}

.story-main-copy {
    text-align: center;
    font-size: 2.4rem;
    /* Increased size */
    font-weight: 900;
    line-height: 1.2;
    /* Layered shadow for a pop/3D effect */
    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        4px 4px 8px rgba(0, 0, 0, 0.8);
    font-family: var(--font-base);
    /* Changed from Courier to the more pop rounded base font */
    letter-spacing: 1px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    transform: rotate(-2deg);
    /* Slight rotation for playfulness */
}

.story-highlight {
    color: var(--accent-yellow);
    /* Changed from orange to yellow for higher contrast/pop */
    font-size: 2.8rem;
    /* Make the highlight even bigger */
    display: inline-block;
    transform: scale(1.1);
    /* Same heavy stroke effect + glow */
    text-shadow:
        2px 2px 0 #000,
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 0 15px rgba(255, 204, 0, 0.6);
}

.story-desc {
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 10px;
    backdrop-filter: blur(2px);
}

.story-hashtags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hashtag {
    background: rgba(0, 0, 0, 0.6);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    transform: rotate(2deg);
}

/* Text Animations inside Active Scene */

/* Fade/Slide Up */
.cinematic-scene .scene-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out 0.5s, transform 1s ease-out 0.5s;
}

.cinematic-scene.active .scene-fade-up {
    opacity: 1;
    transform: translateY(0);
}

/* Typewriter Fake (Using steps on width) */
.scene-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #fff;
    width: 0;
}

.cinematic-scene.active .scene-typewriter {
    animation: typing 1.5s steps(15, end) forwards, blink-caret .75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: #fff;
    }
}

/* Marker Highlight */
.highlight-marker {
    background: linear-gradient(to right, rgba(235, 126, 62, 0.7) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    padding: 0 5px;
    font-weight: bold;
    transition: background-position 1s ease-out;
}

.cinematic-scene.active .highlight-marker {
    transition-delay: 1.5s;
    background-position: left bottom;
}

/* Stagger Keywords */
.stagger-keyword {
    opacity: 0;
    font-weight: bold;
    color: var(--accent-yellow);
    transition: opacity 0.5s ease-out;
}

.cinematic-scene.active .stagger-keyword.d-1 {
    transition-delay: 1.0s;
    opacity: 1;
}

.cinematic-scene.active .stagger-keyword.d-2 {
    transition-delay: 1.8s;
    opacity: 1;
}

.cinematic-scene.active .stagger-keyword.d-3 {
    transition-delay: 2.6s;
    opacity: 1;
}

.cinematic-scene.active .stagger-keyword.d-4 {
    transition-delay: 3.2s;
    opacity: 1;
}

.cinematic-scene.active .stagger-keyword.d-5 {
    transition-delay: 3.8s;
    opacity: 1;
}

/* Climax Text (Sceen 4) */
.scene-climax {
    font-size: 2.5rem;
    font-weight: 900;
    margin-top: 40px;
    line-height: 1.3;
    color: var(--accent-yellow);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 1.5s ease-out 3s, transform 1.5s ease-out 3s;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.cinematic-scene.active .scene-climax {
    opacity: 1;
    transform: scale(1);
}

.text-center {
    text-align: center;
}

/* Footer CTA */
.story-footer {
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.story-link-sticker {
    background: white;
    color: #00AAFF;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s;
    transform: rotate(-1deg);
}

.story-link-sticker i {
    font-size: 0.9rem;
}

.story-link-sticker:hover {
    transform: scale(1.05) rotate(0deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    color: #0077ff;
}

.story-swipe-up {
    font-size: 1.5rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    animation: bounce 1.5s infinite;
    opacity: 0.8;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* --- Specialties (Slider修正版) --- */
.specialties {
    margin: 60px 0;
    padding: 60px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.specialties__title-badge {
    text-align: center;
    background: var(--sub-black);
    color: white;
    width: 300px;
    margin: 0 auto 40px;
    padding: 6px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 3rem;
}

/* スライダー全体枠 */
.spec-slider-wrapper {
    width: 100%;
    /* 全幅に変更 */
    margin: 0 auto;
    position: relative;
    padding: 0;
    /* パディング削除 */
}

/* 表示窓 */
.spec-slider-window {
    width: 100%;
    overflow: visible;
    /* はみ出した部分（前後のスライド）を表示させる */
    /* ※親要素のsectionでoverflow:hiddenしているので画面外は切れます */
}

/* 動くトラック */
.spec-slider-track {
    display: flex;
    /* transitionはJSで制御するためCSSでは基本設定のみ */
    width: 100%;
    align-items: center;
    /* 垂直方向中央揃え */
}

/* カードデザイン（センターモード用） */
.spec-card {
    /* ▼ 修正: 幅を100%から縮小して前後が見えるようにする */
    min-width: 60vw;
    /* PC: 画面幅の60% */
    max-width: 800px;

    height: 400px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: white;
    gap: 40px;

    /* ▼ 修正: 非アクティブ時のスタイル（白透明） */
    opacity: 0.3;
    /* 薄くする */
    transform: scale(0.9);
    /* 少し小さく */
    transition: all 0.5s ease;
    /* アニメーション */

    margin: 0 20px;
    /* カード同士の隙間 */
}

/* アクティブなカード（JSで付与） */
.spec-card.current-slide {
    opacity: 1;
    /* くっきり */
    transform: scale(1);
    /* 通常サイズ */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 2;
    /* 手前に表示 */
}

/* 色設定（既存流用） */
.c-yellow {
    background: var(--accent-yellow);
    color: #333;
}

.c-blue {
    background: #00AAFF;
}

.c-green {
    background: #00CC66;
}

.c-pink {
    background: #FF6699;
}

/* カード内部レイアウト */
.spec-img img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 8px solid rgba(255, 255, 255, 0.4);
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.spec-info {
    flex: 1;
    text-align: left;
}

.spec-title {
    font-size: 4rem;
    font-weight: 900;
    opacity: 0.9;
    line-height: 1;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
    letter-spacing: 2px;
}

.spec-info p {
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.6;
}


/* スマホ対応 */
@media (max-width: 768px) {
    .spec-card {
        min-width: 80vw;
        /* スマホでは少し広めにし、センタリングマージンを確保 */
        margin: 0 10vw;

        flex-direction: column;
        height: auto;
        text-align: center;
        padding: 40px 20px;
        gap: 20px;
    }

    .spec-info {
        text-align: center;
    }

    .spec-img img {
        width: 150px;
        height: 150px;
        border-width: 5px;
    }

    .spec-title {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .spec-info p {
        font-size: 1rem;
    }

}

/* --- Works (Flip & Cloud) --- */
.works {
    background: var(--main-orange);
    padding-top: 60px;
}

.flip-grid {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    /* PC: 横一列を強制 */
    gap: 30px;
    margin-bottom: 60px;
}

.flip-card {
    background-color: transparent;
    width: 180px;
    height: 180px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* --- Works (Flip & Cloud) 修正箇所 --- */

/* ▼ 1. アイコンサイズを大きく変更 */
/* ▼ 1. アイコンサイズを大きく変更 (修正版: Wrapperを使用) */
.flip-card-wrapper {
    /* PC: 4列 */
    width: calc((100% - 90px) / 4);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* カードのポップアップの基準点にならないように注意(カードはfixed or transformで動かす) */
}

.flip-card {
    background-color: transparent;
    width: 100%;
    /* Wrapperに合わせる */
    aspect-ratio: 1 / 1;
    height: auto;
    perspective: 1000px;
    /* ポップアップ時の基準 */
    transform-origin: center center;
}

/* カード下のタイトル */
/* カード下のタイトル */
.work-card-title {
    margin-top: 15px;
    font-size: 1.5rem;
    font-weight: 900;
    color: #000;
    /* Requested: Black */
    text-align: center;
}

/* 表面（Front）のデザイン */
.flip-card-front {
    background-color: #fff;
    color: var(--main-orange);
    border: 4px solid var(--main-orange);
    transition: 0.3s;
    /* コンテンツの配置調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直方向中央寄せ */
    align-items: center;
}

/* 表面の画像 - そのまま表示 */
.flip-card-front img {
    width: 60%;
    /* サイズバランス調整 */
    height: auto;
    border-radius: 0;
    margin-bottom: 10px;
    object-fit: contain;
    filter: none;
}

/* タイトル */
.flip-card-front h3 {
    font-size: 2.5rem;
    /* サイズに合わせて少し大きく */
    font-weight: 900;
    margin-top: 5px;
}


/* ▼ 2. 裏面（Back）のデザイン修正 */
.flip-card-back {
    background-color: #ffffff;
    color: var(--main-orange);
    border: 4px solid var(--main-orange);
    transform: rotateY(180deg);
    padding: 15px;
    /* コンテンツの配置調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直方向中央寄せ */
    align-items: center;
}

/* 裏面の画像 - 背景として配置 */
.flip-card-back img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: auto;
    opacity: 0.1;
    /* 薄く表示 */
    z-index: 0;
    pointer-events: none;
}

/* 裏面のタイトル */
.flip-card-back h3 {
    color: var(--main-orange);
    border-bottom: 2px solid rgba(232, 56, 13, 0.3);
    padding-bottom: 2px;
    margin-bottom: 5px;
    display: inline-block;
    font-size: 1rem;
    /* 拡大されるので小さめに (実質2rem) */
    position: relative;
    z-index: 1;
}

/* 裏面の説明文 */
.flip-card-back p {
    color: var(--text-color);
    font-size: 0.7rem;
    /* 拡大されるので小さめに (実質1.4rem) */
    line-height: 1.4;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Click案内 (Frontに表示) */
.flip-card-front::after {
    content: "Click to Open";
    position: absolute;
    bottom: 10px;
    font-size: 0.7rem;
    color: #999;
    opacity: 0;
    transition: opacity 0.3s;
}

/* マウスを乗せた時（初期状態）に表示 */
.flip-card:hover .flip-card-front::after {
    opacity: 1;
}

/* ポップアップ時（is-popped）は "Click to Close" に変更 */
.flip-card.is-popped .flip-card-front::after {
    content: "Click to Close";
    opacity: 1;
}

/* 反転は is-flipped クラスで制御 */
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* スマホ対応（画面からはみ出さないように調整） */
@media (max-width: 768px) {
    .flip-grid {
        flex-wrap: wrap;
        /* スマホ: 折り返し有効 */
    }

    .flip-card-wrapper {
        width: 160px;
        /* スマホでは小さめに */
    }

    .flip-card {
        width: 100%;
        height: 160px;
    }

    .work-card-title {
        font-size: 1rem;
        margin-top: 10px;
    }

    .flip-card-front h3 {
        font-size: 0.9rem;
    }

    .flip-card-back h3 {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .flip-card-back p {
        font-size: 0.8rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        /* For compatibility */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 長文カット */
}

/* Cloud Section */
.cloud-section {
    position: relative;
}

.cloud-shape-top svg {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: -1px;
    /* 隙間防止 */
}

.cloud-content {
    background: #fff;
    padding: 20px 0 80px;
    text-align: center;
}

/* --- Pickup Highlights Area --- */
.pickup-highlights-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px auto 40px;
}

.pickup-highlight-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.pickup-highlight-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--main-orange);
}

.pickup-highlight-card:hover {
    transform: translateY(-5px);
}

.highlight-icon {
    font-size: 2.5rem;
    color: var(--main-orange);
    margin-bottom: 15px;
}

.highlight-text {
    font-size: 1rem;
    font-weight: bold;
    color: var(--sub-black);
    line-height: 1.5;
}

.highlight-text small {
    font-size: 0.8rem;
    color: #666;
    font-weight: normal;
    display: block;
    margin-top: 5px;
}

@media (max-width: 768px) {
    .pickup-highlights-section {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 20px auto 30px;
        padding: 0 15px;
    }
}

/* Works Slider (Manual) */
/* Works Slider (Loop & Center) */
.works-slider-wrapper {
    width: 100%;
    margin: 0 auto 40px;
    position: relative;
    padding: 0;
}

.works-slider-window {
    width: 100%;
    overflow: visible;
}

.works-slider-track {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.work-item {
    /* Fixed size for uniformity */
    width: 450px;
    min-width: 450px;
    /* Ensure flex item doesn't shrink */
    min-height: 380px;
    height: auto;
    /* Allow expanding */

    background: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 0;
    transition: height 0.3s ease, min-height 0.3s ease, margin 0.3s ease;
    margin: 0 20px;

    /* Flex layout to manage image/text ratio */
    display: flex;
    flex-direction: column;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.work-item.current-slide {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.work-item.is-expanded {
    /* Optional: any specific expanded styling for the card itself */
    z-index: 5;
}

.work-item img {
    width: 100%;
    height: 250px;
    /* Fixed height for image */
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.work-text-area {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    color: var(--text-color);
    text-align: left;
}

.work-item p.work-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.work-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
    /* Grid animation setup */
    display: grid;
    grid-template-rows: 4.5em;
    /* Approximately 3 lines of text (1.5 * 3) */
    transition: grid-template-rows 0.4s ease-out;
}

.work-desc-inner {
    overflow: hidden;
    /* Apply line-clamp internally */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.work-desc.expanded {
    grid-template-rows: 1fr;
}

.work-desc.expanded .work-desc-inner {
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.work-read-more {
    background: transparent;
    border: none;
    color: var(--main-orange);
    font-weight: bold;
    font-size: 0.85rem;
    padding: 0;
    margin-top: auto;
    /* Push button to the bottom */
    cursor: pointer;
    text-align: right;
    align-self: flex-end;
}

.work-read-more:hover {
    text-decoration: underline;
}

/* Works Site Link Button */
.work-site-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--main-orange);
    color: #fff;
    font-size: 0.85rem;
    font-weight: bold;
    padding: 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    margin-top: 10px;
    align-self: flex-start;
    transition: opacity 0.3s, transform 0.3s;
}

.work-site-link-btn:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

.work-site-link-btn i {
    font-size: 0.75rem;
}

.works-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 50px;
    height: 50px;
    background: var(--sub-black);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.3s;
}

.works-nav-btn:hover {
    background: white;
    color: var(--sub-black);
    transform: translateY(-50%) scale(1.1);
}

.works-nav-btn.prev {
    left: 5vw;
}

.works-nav-btn.next {
    right: 5vw;
}

/* Base Responsive */

/* --- Smooth Text Animation --- */
.smooth {
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    transition: 0.5s cubic-bezier(0.37, 0, 0.63, 1);
    transition-property: clip-path;
    line-height: 1.2;
}

/* Ensure 'en' spans remain centered and on their own line, but with a fitted box for the wipe effect */
span.en.smooth {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.smooth.is-animated {
    clip-path: inset(0);
}

@media (max-width: 768px) {
    .work-item {
        min-width: 80vw;
        /* Center calculation: (100vw - 80vw) / 2 = 10vw */
        margin: 0 10vw;
    }

    .works-nav-btn.prev {
        left: 10px;
    }

    .works-nav-btn.next {
        right: 10px;
    }

    .work-item p.work-title {
        font-size: 1rem;
        padding: 10px;
    }
}

/* --- Achievements Tab UI Area --- */
.achievements-tab-container {
    max-width: 900px;
    margin: 50px auto 40px;
    padding: 0 15px;
}

/* Tab Navigation */
.achievements-tab-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    border-bottom: 2px solid #ddd;
    margin-bottom: 30px;
}

.achievements-tab-btn {
    background: transparent;
    border: none;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.achievements-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--main-orange);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.achievements-tab-btn:hover {
    color: var(--sub-black);
}

.achievements-tab-btn.active {
    color: var(--sub-black);
}

.achievements-tab-btn.active::after {
    transform: scaleX(1);
}

@media (max-width: 768px) {
    .achievements-tab-nav {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        /* Scrollbar space */
        scrollbar-width: none;
        /* Firefox */
    }

    .achievements-tab-nav::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }

    .achievements-tab-btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
}

/* Tab Content Wrap */
.achievements-tab-content-wrap {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
    padding: 30px;
    min-height: 300px;
}

.achievements-tab-content {
    display: none;
    animation: fadeInTab 0.4s ease forwards;
}

.achievements-tab-content.active {
    display: block;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .achievements-tab-content-wrap {
        padding: 20px 15px;
    }
}

/* Tab 1: List Table (Striped) */
.achievements-list-table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #eee;
}

.achievements-list-row {
    display: flex;
    padding: 15px 10px;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
    transition: background 0.2s;
}

.achievements-list-row:nth-child(even) {
    background-color: #fafafa;
}

.achievements-list-row:hover {
    background-color: #fff9f0;
}

.achievements-list-org {
    width: 150px;
    flex-shrink: 0;
    font-weight: bold;
    color: var(--main-orange);
    font-size: 0.95rem;
}

.achievements-list-detail {
    flex-grow: 1;
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: left;
}

@media (max-width: 768px) {
    .achievements-list-row {
        flex-direction: column;
        padding: 12px 10px;
    }

    .achievements-list-org {
        width: 100%;
        margin-bottom: 5px;
    }
}

/* Tab 2: Media List (Logos) */
.media-tab-lead {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--sub-black);
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.5;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}

.media-logos-grid-tab {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    align-items: center;
    justify-items: center;
}

.media-logo-item-tab {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 5/2;
}

.media-logo-item-tab img {
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 768px) {
    .media-tab-lead {
        font-size: 0.95rem;
    }
}

/* Tab 3: Publish & Award (Cards) */
.award-cards-wrap {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

.award-card {
    display: flex;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    align-items: center;
}

.award-card-img {
    width: 200px;
    flex-shrink: 0;
    background: #eee;
    display: flex;
    align-items: center;
}

.award-card-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.award-card-img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.award-card-text {
    padding: 20px;
    text-align: left;
    flex-grow: 1;
}

.award-card-action {
    padding: 20px;
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.award-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ff9900;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.award-card-btn:hover {
    opacity: 0.8;
}

.award-badge {
    display: inline-block;
    background: var(--main-orange);
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.award-card-text h4 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--sub-black);
    margin-bottom: 5px;
    line-height: 1.4;
}

.award-desc {
    font-size: 0.9rem;
    color: #666;
}

@media (max-width: 768px) {
    .award-card {
        flex-direction: column;
        align-items: stretch;
    }

    .award-card-img {
        width: 100%;
        height: 200px;
    }

    .award-card-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .award-card-action {
        padding: 0 20px 20px;
        justify-content: center;
    }

    .award-card-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Tab 4: SNS & Produce (Infographic Cards) */
.infograph-cards-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.infograph-card {
    background: #fff;
    border: 2px solid var(--main-orange);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.1);
}

.infograph-icon {
    font-size: 2rem;
    color: var(--main-orange);
    margin-bottom: 15px;
}

.infograph-data {
    font-size: 0.95rem;
    font-weight: bold;
    color: #666;
    margin-bottom: 10px;
}

.infograph-value {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--sub-black);
    line-height: 1;
    margin-bottom: 5px;
}

.infograph-value span {
    font-size: 1rem;
    font-weight: bold;
    margin-left: 2px;
}

.infograph-sub {
    font-size: 0.85rem;
    color: #888;
}

/* Accordion (Job List) */
.job-list-area {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.dangling-char {
    position: absolute;
    top: -50px;
    right: -20px;
    animation: swing 3s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes swing {
    0% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

.dangling-char .char-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.accordion-btn {
    width: 100%;
    background: var(--main-orange);
    color: white;
    border: none;
    padding: 15px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}

.accordion-btn:hover {
    background: #e67e00;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background: #fff;
    text-align: left;
}

.accordion-content.open {
    max-height: 500px;
}

.history-list {
    padding: 20px;
}

.history-list li {
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
}

.history-list .date {
    font-weight: bold;
    color: var(--main-orange);
    margin-right: 10px;
}

/* --- Recent --- */
.recent__content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.recent__img {
    flex: 1;
}

.photo-frame {
    position: relative;
    padding: 10px;
    background: #FF8C00;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transform: rotate(-3deg);
}

.bubble-msg {
    position: absolute;
    bottom: -10px;
    right: -10px;
    background: white;
    border: 2px solid var(--sub-black);
    padding: 10px;
    border-radius: 20px;
    font-weight: bold;
    box-shadow: 4px 4px 0 var(--sub-black);
}

.recent__news {
    flex: 1;
}

.news-head {
    font-size: 1.5rem;
    border-bottom: 4px solid var(--main-orange);
    display: inline-block;
    margin-bottom: 20px;
}

.news-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 15px;
    /* スクロールバー用の余白 */
}

/* スクロールバーのデザイン（Webkit向け） */
.news-list::-webkit-scrollbar {
    width: 6px;
}

.news-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.news-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.news-list::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.news-list li {
    margin-bottom: 25px;
}

.news-list a,
.news-list .news-item-content {
    display: flex;
    align-items: baseline;
    gap: 10px;
    transition: 0.2s;
}

.news-list a:hover {
    opacity: 0.7;
}

.news-list .tag {
    font-size: 0.7rem;
    padding: 2px 10px;
    background: #999;
    color: white;
    border-radius: 4px;
}

.news-list .tag.red {
    background: red;
}

/* --- Voicy Section --- */
.voicy-section {
    background: linear-gradient(135deg, #FF8C00 0%, #FFB347 50%, #FFCC00 100%);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.voicy-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    animation: voicy-glow 6s ease-in-out infinite;
}

@keyframes voicy-glow {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(5%, 5%);
    }
}

.voicy-inner {
    position: relative;
    z-index: 1;
}

.voicy-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    padding: 6px 20px;
    border-radius: 50px;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.voicy-title {
    font-size: 2.8rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.voicy-highlight {
    background: rgba(255, 255, 255, 0.3);
    padding: 2px 15px;
    border-radius: 10px;
    display: inline-block;
}

.voicy-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 35px;
}

.voicy-card {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.voicy-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

.voicy-card-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.voicy-card-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.voicy-icon-fallback {
    width: 50px;
    height: 50px;
    background: #FF8C00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.voicy-card-body {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.voicy-card-label {
    font-size: 0.75rem;
    color: #999;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.voicy-card-name {
    font-size: 1rem;
    font-weight: 900;
    color: var(--sub-black);
}

.voicy-listen-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--main-orange);
    color: #fff;
    font-weight: bold;
    font-size: 0.95rem;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
}

.voicy-listen-btn:hover {
    background: #e67e00;
    transform: scale(1.05);
}

/* Sound Wave Animation */
.voicy-wave {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    margin-top: 35px;
    height: 30px;
}

.voicy-wave span {
    display: block;
    width: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    animation: voicy-wave-bar 1.2s ease-in-out infinite;
}

.voicy-wave span:nth-child(1) {
    height: 10px;
    animation-delay: 0s;
}

.voicy-wave span:nth-child(2) {
    height: 20px;
    animation-delay: 0.1s;
}

.voicy-wave span:nth-child(3) {
    height: 28px;
    animation-delay: 0.2s;
}

.voicy-wave span:nth-child(4) {
    height: 16px;
    animation-delay: 0.3s;
}

.voicy-wave span:nth-child(5) {
    height: 24px;
    animation-delay: 0.4s;
}

.voicy-wave span:nth-child(6) {
    height: 12px;
    animation-delay: 0.5s;
}

.voicy-wave span:nth-child(7) {
    height: 26px;
    animation-delay: 0.6s;
}

.voicy-wave span:nth-child(8) {
    height: 18px;
    animation-delay: 0.7s;
}

.voicy-wave span:nth-child(9) {
    height: 22px;
    animation-delay: 0.8s;
}

.voicy-wave span:nth-child(10) {
    height: 14px;
    animation-delay: 0.9s;
}

@keyframes voicy-wave-bar {

    0%,
    100% {
        transform: scaleY(0.4);
        opacity: 0.4;
    }

    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* Voicy Responsive */
@media (max-width: 768px) {
    .voicy-section {
        padding: 60px 20px;
    }

    .voicy-title {
        font-size: 2rem;
    }

    .voicy-desc {
        font-size: 0.9rem;
    }

    .voicy-card {
        flex-direction: column;
        border-radius: 20px;
        padding: 25px;
        gap: 15px;
    }

    .voicy-card-body {
        text-align: center;
    }
}

.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .sp-only {
        display: inline;
    }
}

/* --- SNS --- */
.sns-section {
    text-align: center;
    padding: 60px 0;
    background: #fafafa;
}

.sns-title-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

.sns-title {
    font-size: 3rem;
    margin-bottom: 15px;
    font-weight: 900;
    position: relative;
}

.sns-title-deco {
    position: absolute;
    top: -120px;
    left: -220px;
    width: 300px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    transform: rotate(-10deg);
}

/* Bouncy Slide Animation for SNS Deco */
.bouncy-slide-trigger {
    opacity: 0;
    transform: translate(-100px, 0) rotate(-20deg);
}

.bouncy-slide-trigger.is-animated-bouncy {
    animation: bouncySlideIn 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bouncySlideIn {
    0% {
        opacity: 0;
        transform: translate(-100px, 0) rotate(-20deg);
    }

    60% {
        opacity: 1;
        transform: translate(20px, 0) rotate(-5deg);
    }

    80% {
        transform: translate(-10px, 0) rotate(-12deg);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-10deg);
    }
}

.sns-title-br {
    display: none;
}

@media (max-width: 1024px) {
    .sns-title-deco {
        top: -120px;
        left: -40px;
        width: 210px;
    }
}

@media (max-width: 768px) {
    .sns-title-deco {
        width: 168px;
        /* 210pxから20%縮小 */
        top: -150px;
        left: -80px;
        /* 'S'の真上付近へ左にずらす */
        margin-left: 0;
        /* 中央寄せ解除 */
    }

    .sns-title-br {
        display: block;
    }

    .sns-title-sub {
        display: block;
        font-size: 1.2rem;
        margin-top: 5px;
    }
}

.sns-icons {
    font-size: 3rem;
    margin-bottom: 40px;
}

.sns-icons .icon {
    margin: 0 10px;
    color: #333;
    transition: 0.3s;
}

.sns-icons .youtube:hover {
    color: #ff0000;
}

.sns-icons .facebook:hover {
    color: #002aff;
}

.sns-icons .x-twitter:hover {
    color: black;
}

.sns-icons .instagram:hover {
    color: #e1306c;
}

.sns-icons .tiktok:hover {
    color: #9e9e9e;
}

/* .sns-grid は廃止予定だが、既存影響を考慮し残しつつ上書きまたは新規クラスで対応 */
.sns-layout-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.sns-youtube-area {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

/* TikTok Area (Middle) */
.tiktok-area-centered {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.tiktok-embed {
    margin: 0 !important;
    width: 600px !important;
    /* PC等で幅を大きく確保 */
    max-width: 100% !important;
    /* スマホでははみ出さないように */
}

/* 公式スタイルのリセットとサイズ調整 */

/* Instagram Grid Area (Bottom) */
.insta-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Instagram Embed Customize */
.instagram-media {
    min-width: unset !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
}

/* 各埋め込みブロックの調整 */
.sns-block-embed {
    background: transparent;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 900px) {
    .insta-grid-container {
        grid-template-columns: repeat(2, 1fr);
        /* 中画面は2列 */
    }
}

@media (max-width: 600px) {
    .insta-grid-container {
        grid-template-columns: 1fr;
        /* スマホは1列 */
    }
}

.sns-block-embed {
    background: transparent;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* --- Footer CTA --- */
.footer-cta {
    position: relative;
    background: var(--sub-black);
    color: white;
    text-align: center;
    padding: 80px 20px 20px;
    overflow: hidden;
}

.footer-bg-img {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background: radial-gradient(circle, var(--main-orange) 0%, transparent 70%);
}

.footer-center-img {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    opacity: 0.3;
    z-index: 0;
}

.footer-content {
    position: relative;
    z-index: 1;
}

.collab-box {
    margin-bottom: 60px;
}

.collab-char {
    display: inline-block;
    position: relative;
    margin-bottom: 20px;
    width: 120px;
    height: 120px;
}

.char-bubble {
    position: absolute;
    top: -20px;
    right: -80px;
    background: white;
    color: black;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.collab-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 30px;
}

.collab-btn {
    display: inline-block;
    background: #D9333F;
    /* ボタンは赤で目立たせる */
    color: white;
    padding: 15px 50px;
    border-radius: 50px;
    box-shadow: 0 10px 0 #9f1d26;
    transition: 0.2s;
    text-align: center;
}

.collab-btn:hover {
    transform: translateY(5px);
    box-shadow: 0 5px 0 #9f1d26;
}

.collab-btn .main {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
}

.collab-btn .sub {
    display: block;
    font-size: 0.9rem;
    margin-top: 5px;
    opacity: 0.9;
}

.copyright {
    font-size: 0.8rem;
    opacity: 0.6;
}

.copyright a {
    display: block;
    margin-bottom: 10px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .mv__title {
        font-size: 2.5rem;
    }

    .recent__content {
        flex-direction: column;
    }

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

    .insta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .collab-title {
        font-size: 1.8rem;
    }

    /* Nav adjustment */
    .nav-icon {
        width: 50px;
        height: 40px;
        font-size: 1.2rem;
    }

    .nav-item::before {
        height: 20px;
    }
}

/* --- Side Share & Hamburger (新規追加) --- */
.side-share {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #cc0000;
    color: white;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

@media (max-width: 768px) {
    .side-share {
        display: none;
    }
}

.share-label {
    writing-mode: vertical-rl;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.share-iconinstagram {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: white;
    color: #cc0000;
    border-radius: 50%;
    margin: 5px 0;
    font-size: 0.9rem;
    transition: 0.3s;
}

.share-iconx {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: white;
    color: #cc0000;
    border-radius: 50%;
    margin: 5px 0;
    font-size: 0.9rem;
    transition: 0.3s;
}

.share-iconinstagram:hover {
    transform: scale(1.1);
    color: #e1306c;
}

.share-iconx:hover {
    transform: scale(1.1);
    color: black;
}

.hamburger-menu {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    width: 50px;
    height: 50px;
    background: white;
    color: #cc0000;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- New Main Visual (背景修正版) --- */
.mv-new {
    position: relative;
    width: 100%;
    min-height: max(100vh, 750px);

    /* 文字色は白 */
    color: #dcdcdc;

    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 100px;
}

.mv-new-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ▼▼▼ 半透明オレンジ(#ff914d)の重ねがけ ▼▼▼ */
.mv-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 指定のオレンジ色 */
    background-color: #ff914d;

    /* 半透明にする (0.50あたりで調整) */
    opacity: 0.0;

    /* 背景画像とコンテンツの間に配置 */
    z-index: 1;
}

/* コンテンツを前面に出す（オーバーレイより上に） */
.mv-content {
    position: relative;
    z-index: 2;
    /* ::beforeのz-index:1 より大きく */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}


/* 飛び跳ねる人と吹き出し */
.mv-top-visual {
    position: absolute;
    top: -70px;
    left: 45%;
    transform: translateX(-50%);
    width: 300px;
    height: 200px;
}

.jumping-man {
    position: absolute;
    top: 40px;
    left: 80px;
    width: 150px;
    z-index: 2;
    transform: rotate(10deg);
    display: none;
    /* 初期状態は非表示 */
}

.speech-bubbles {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    display: none;
    /* 初期状態は非表示 */
}

.bubble {
    position: absolute;
    background: white;
    color: var(--text-color);
    padding: 10px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    border: 10px solid transparent;
    border-top-color: white;
}

.bubble-left {
    top: 10px;
    left: -20px;
    transform: rotate(-10deg);
}

.bubble-right {
    top: 10px;
    right: 0;
    transform: rotate(5deg);
}

.handwritten {
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

/* テキストエリア */
.mv-text-area {
    margin-top: 150px;
    text-align: left;
}

.mv-sub {
    font-size: 2.0rem;
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
}

.mv-main-title {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.mv-line {
    width: 100%;
    max-width: 600px;
    height: 5px;
    background: #dcdcdc;
    margin-bottom: 15px;
    border: 1px solid black;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.mv-official {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.2em;
}

/* Rolling Text Animation */
.name-sub {
    font-size: 0.5em;
    /* 0.5倍のサイズ */
    vertical-align: middle;
    /* 位置調整 */
    display: inline-block;
    /* 回転アニメーションのために必要 */
}

.char-roll {
    display: inline-block;
    opacity: 0;
    backface-visibility: hidden;
    /* アニメーション名はJSで付与、またはここで一括指定してJSでdelayのみ制御も可 */
    animation: rollInLeft 2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes rollInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100vw) rotate(-720deg);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* Fire Ignition Animation */
.char-fire {
    display: inline-block;
    opacity: 0;
    /* 炎は回転させずに、スケールでポンと出す */
    animation: fireIgnite 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fireIgnite {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    60% {
        opacity: 1;
        transform: scale(3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce Animation for Sub-title */
.char-bounce {
    display: inline-block;
    opacity: 0;
    animation: bounceIn 0.8s cubic-bezier(0.5, 0.05, 0.1, 0.3) forwards;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        opacity: 1;
        transform: translateY(-5px);
    }

    80% {
        transform: translateY(0);
    }

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



/* Elastic Line Animation */
.line-anim {
    transform-origin: left center;
    /* 初期状態はスケール0 */
    transform: scaleX(0);
    opacity: 0;
    animation: lineElastic 0.8s ease-out forwards;
}

@keyframes lineElastic {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* Bubbles & Jumping Man Animation */
.bubble-anim-left {
    opacity: 0;
    /* translate前の座標 (-20px, 10px rotate(-10deg)) に加算する形になるので注意が必要だが、
       ここではシンプルに animation で transform を上書き制御する */
    animation: arcInLeft 0.6s ease-out forwards;
}

.bubble-anim-right {
    opacity: 0;
    animation: arcInRight 0.6s ease-out forwards;
}

@keyframes arcInLeft {
    0% {
        transform: translate(-100px, -100px) rotate(-30deg);
        opacity: 0;
    }

    100% {
        /* .bubble-left の元スタイル: rotate(-10deg) */
        transform: translate(0, 0) rotate(-10deg);
        opacity: 1;
    }
}

@keyframes arcInRight {
    0% {
        transform: translate(100px, -100px) rotate(20deg);
        opacity: 0;
    }

    100% {
        /* .bubble-right の元スタイル: rotate(5deg) */
        transform: translate(0, 0) rotate(5deg);
        opacity: 1;
    }
}

/* Jumping Man Base */
.jumping-man {
    /* アニメーション切り替え時のズレを防ぐため、常に基準点を上中央にする */
    transform-origin: top center;
}

.man-drop {
    opacity: 0;
    animation: dropIn 0.5s ease-in forwards;
}

@keyframes dropIn {
    0% {
        transform: translate(0, -300px) rotate(5deg);
        opacity: 0;
    }

    60% {
        transform: translate(0, 0) rotate(5deg);
        opacity: 1;
    }

    80% {
        transform: translate(0, -20px) rotate(5deg);
    }

    100% {
        /* swingLoopの開始位置(中心: 5deg)に合わせて終わる */
        transform: translate(0, 0) rotate(5deg);
        opacity: 1;
    }
}

.man-swing {
    transform-origin: top center;
    /* 全体はlinearにし、区間ごとにイージングを制御して中心通過時の停止を防ぐ */
    animation: swingLoop 2s linear infinite;
}

@keyframes swingLoop {

    /* 中心(5deg)からスタートし、右(25deg) -> 左(-15deg) -> 中心(5deg) */
    0% {
        transform: rotate(5deg);
        animation-timing-function: ease-out;
        /* 中心(最速) -> 右端 */
    }

    25% {
        transform: rotate(25deg);
        animation-timing-function: ease-in-out;
        /* 右端 -> 左端 */
    }

    75% {
        transform: rotate(-15deg);
        animation-timing-function: ease-in;
        /* 左端 -> 中心(最速) */
    }

    100% {
        transform: rotate(5deg);
    }
}



/* アニメーション準備用（JSで付与） */
.prepare-anim {
    opacity: 0 !important;
}

.ui-fade-visible {
    opacity: 1 !important;
    transition: opacity 1s ease-in-out;
}


/* =========================================
   Hero Bottom Canvas Background 
========================================= */
.hero-bottom-bg-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

#heroBottomCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* 下部ナビゲーション */
.mv-bottom-nav {
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 15;
}

.afro-nav-item {
    display: block;
    width: 180px;
    height: 180px;
    transition: transform 0.3s;
}

.afro-nav-item:hover {
    transform: translateY(-10px);
}

.afro-shape {
    width: 100%;
    height: 100%;
    background: #cc0000;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    border: 3px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.afro-shape::before,
.afro-shape::after {
    content: '';
    position: absolute;
    background: #cc0000;
    border-radius: 50%;
}

.afro-shape::before {
    width: 80px;
    height: 80px;
    top: -10px;
    left: -10px;
}

.afro-shape::after {
    width: 80px;
    height: 80px;
    top: -10px;
    right: -10px;
}

.nav-text {
    position: relative;
    z-index: 2;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.4;
}

/* Pick Up Section */
.pickup-title {
    color: #cc0000;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.video-msg {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 30px;
}

.highlight-bg {
    background: linear-gradient(transparent 60%, #ffeb3b 60%);
}

.video-container-wrap {
    max-width: 800px;
    margin: 0 auto;
    border: 5px solid black;
    border-radius: 10px;
    overflow: hidden;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .mv-new {
        min-height: 500px;
    }

    .mv-main-title {
        font-size: 2.5rem;
    }

    .mv-official {
        font-size: 1.2rem;
    }

    .mv-bg-face {
        width: 80%;
        opacity: 0.2;
    }

    .mv-top-visual {
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
    }

    .mv-text-area {
        text-align: center;
        margin-top: 150px;
        /* Adjusted for new SP background */
    }

    .mv-line {
        margin: 15px auto;
    }

    .hero-bottom-bg-container {
        height: 200px;
    }

    .mv-bottom-nav {
        gap: 5px;
        bottom: -30px;
    }

    .afro-nav-item {
        width: 110px;
        height: 110px;
    }

    .nav-text {
        font-size: 0.9rem;
    }

    .afro-shape::before,
    .afro-shape::after {
        width: 40px;
        height: 40px;
    }
}

/* --- Hamburger & Menu (テンプレート用修正版) --- */
.hamburger-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.hamburger-menu {
    width: 60px;
    height: 60px;
    background: white;
    color: var(--main-orange);
    /* テンプレートのメインカラー(オレンジ)を使用 */
    border: none;
    border-radius: 50%;
    /* font-size: 1.8rem; Removed */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* 3本の線の間隔 */
    transition: 0.3s;
}

.hamburger-menu:hover {
    transform: scale(1.05);
}

/* ハンバーガーの線 */
.hamburger-bar {
    width: 24px;
    height: 3px;
    background-color: var(--main-orange);
    border-radius: 2px;
    transition: all 0.4s ease-in-out;
    position: relative;
}

/* Active状態 (×印になるアニメーション) */
.hamburger-menu.active .hamburger-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* メニューボックス */
.mobile-menu-box {
    position: absolute;
    top: 75px;
    /* ボタンの少し下 */
    right: 0;
    width: 280px;
    /* 少し幅広に */
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* 影をリッチに */
    padding: 25px;

    /* アニメーション初期状態 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out, transform 0.15s ease-out;
    /* Closing: Very fast */
    overflow: hidden;
    /* Prevent text clipping delay */
}

/* 吹き出しの三角（お好みで追加） */
.mobile-menu-box::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 20px;
    border: 10px solid transparent;
    border-bottom-color: white;
}

/* 表示状態 */
.mobile-menu-box.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), visibility 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* Opening: Bouncy */
}

.mobile-menu-box ul li {
    margin-bottom: 15px;
    border-bottom: 2px dashed #eee;
    /* ポップな破線に変更 */
    padding-bottom: 10px;
}

.mobile-menu-box ul li:last-child {
    margin-bottom: 0;
    border: none;
    padding-bottom: 0;
}

.mobile-menu-box ul li a {
    color: var(--main-orange);
    /* 文字色をオレンジに */
    font-weight: 900;
    /* 太字で元気に */
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    /* 日本語と英語を両端に */
    align-items: center;
    transition: color 0.2s, padding-left 0.2s;
}

/* 英語表記の装飾 */
.mobile-menu-box ul li a .en {
    font-size: 0.7rem;
    color: #ccc;
    font-weight: normal;
}

.mobile-menu-box ul li a:hover {
    color: var(--sub-black);
    /* ホバー時は黒に */
    padding-left: 5px;
}

/* --- Fade-in Animation --- */
.fade-up-trigger {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}


.fade-up-trigger.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Diagnosis Modal --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-window {
    background: white;
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.modal-overlay.active .modal-window {
    transform: translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #eee;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    color: #666;
    transition: 0.2s;
    z-index: 10;
}

.modal-close-btn:hover {
    background: #ddd;
    color: #333;
}

/* Steps */
.step {
    display: none;
    text-align: center;
    animation: fadeIn 0.4s ease;
}

.step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-progress {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--main-orange);
    margin-bottom: 20px;
    border-bottom: 2px solid var(--main-orange);
    display: inline-block;
}

.step-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.choice-btn {
    background: white;
    border: 2px solid #eee;
    padding: 15px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
}

.choice-btn:hover {
    border-color: var(--main-orange);
    background: #fff8f0;
    transform: translateX(5px);
}

.choice-btn i {
    color: var(--main-orange);
    font-size: 1.2rem;
}

/* Loading */
.step-loading {
    padding: 40px 0;
}

.loading-spinner {
    font-size: 3rem;
    color: var(--main-orange);
    margin-bottom: 20px;
}

/* Form */
.modal-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.modal-desc {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

.form-group {
    text-align: left;
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.required {
    background: #ff4444;
    color: white;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 5px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
}

.form-group textarea {
    resize: vertical;
}

.submit-btn {
    background: var(--main-orange);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
}

.submit-btn:hover {
    background: #e67e00;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* OK Impact Text */
.impact-ok {
    font-size: 2.5rem;
    color: var(--main-orange);
    font-weight: 900;
    font-family: Arial, sans-serif;
    /* Impact-like font */
    margin: 0 5px;
    display: inline-block;
    animation: popOK 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    text-shadow: 2px 2px 0px #000;
    transform-origin: center;
}

@keyframes popOK {
    0% {
        transform: scale(0) rotate(-10deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.5) rotate(5deg);
        opacity: 1;
    }

    100% {
        transform: scale(1.2) rotate(0deg);
        opacity: 1;
    }
}

/* Success */
.success-icon {
    font-size: 4rem;
    color: #00CC66;
    margin-bottom: 20px;
}

.close-final-btn {
    margin-top: 20px;
    background: #666;
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 50px;
    cursor: pointer;
}

.close-final-btn:hover {
    background: #444;
}

#form-status {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: bold;
}

.status-error {
    color: red;
}

.status-success {
    color: green;
}

/* =========================================
   Responsive Overrides (Tablet & Mobile) 
========================================= */

/* --- Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }

    /* Works Flip Cards -> 2 Columns */
    .flip-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .flip-card-wrapper {
        width: calc(50% - 15px);
        max-width: 300px;
        /* Prevent it getting too huge */
    }

    .flip-card {
        height: auto;
    }

    /* Instagram -> 2 Columns */
    .insta-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {

    /* Typography & Spacing */
    .section-pad {
        padding: 40px 0;
    }

    .mv-new {
        min-height: max(100vh, 600px);
    }

    .section-head .ja {
        font-size: 2.2rem;
    }

    .section-head .ja-ok {
        font-size: 2.8rem;
    }

    .section-head .mini-title {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    /* MV Bottom Nav Items - Resize for 1 row wrapping */
    .mv-bottom-nav {
        gap: 5px;
        bottom: -20px;
        padding: 0 5px;
    }

    .afro-nav-item {
        width: calc(25% - 5px);
        /* Ensure 4 items fit */
        height: auto;
        aspect-ratio: 1 / 1;
        min-width: 70px;
        max-width: 120px;
        max-height: 120px;
    }

    .nav-text {
        font-size: 0.75rem;
    }

    .afro-shape::before,
    .afro-shape::after {
        width: 40px;
        height: 40px;
    }

    /* Works Flip Cards -> 1 Column */
    .flip-grid {
        flex-direction: column;
        align-items: center;
    }

    .flip-card-wrapper {
        width: 80%;
        max-width: 280px;
    }

    .flip-card {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .flip-card-front h3 {
        font-size: 1.8rem;
    }

    .work-card-title {
        font-size: 1.2rem;
    }

    /* Story UI adjustments */
    .profile-cinematic-layout {
        flex-direction: column;
        gap: 20px;
    }

    .cinematic-left {
        flex: auto;
        width: 100%;
    }

    .cinematic-right {
        min-height: auto;
        padding-top: 30px;
    }

    .cinematic-scene {
        position: static;
    }

    .story-main-copy {
        font-size: 1.8rem;
    }

    .story-highlight {
        font-size: 2rem;
        white-space: nowrap;
    }

    /* Disable fade-up transitions on mobile to prevent scroll jank */
    .fade-up-trigger {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Recent / News Section */
    .recent__content {
        flex-direction: column;
        gap: 20px;
    }

    .recent__img,
    .recent__news {
        width: 100%;
    }

    /* Voicy */
    .voicy-card {
        width: 100%;
        box-sizing: border-box;
        padding: 20px 15px;
    }

    .voicy-listen-btn {
        width: 100%;
        justify-content: center;
        padding: 15px 0;
        /* min 44px tap area */
    }

    /* SNS Embeds */
    .tiktok-embed {
        width: 100% !important;
        min-width: 100% !important;
    }

    .insta-grid-container {
        grid-template-columns: 1fr;
    }

    /* Shared / General Tap Target Sizes (min 44x44px target) */
    .arrow-btn,
    .spec-btn,
    .works-nav-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Mobile nav padding for tap area */
    .mobile-menu-box ul li a {
        padding: 12px 0;
    }

    .accordion-btn {
        min-height: 50px;
    }

    /* --- Additions for Horizontal Scroll Fix --- */

    /* Prevent profile slider buttons from pushing the page width */
    #prof-prev {
        margin-left: 0;
    }

    #prof-next {
        margin-right: 0;
    }

    /* Fix large titles causing text overflow */
    .mv-main-title {
        font-size: 1.8rem;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .voicy-title {
        font-size: 1.8rem;
        word-break: keep-all;
    }

    /* Ensure content wrapper doesn't exceed screen */
    .sns-layout-container {
        width: 100%;
        /* removed overflow-x: hidden; as .site-wrapper handles it */
    }

    /* Reduce YouTube padding slightly so it doesn't push width */
    .sns-youtube-area {
        padding: 15px;
        width: calc(100% - 30px);
    }
}