@charset "UTF-8";

/*
==========================================================================
   スクロールバー非表示設定（スクロール機能は維持）

==========================================================================
*/ ::-webkit-scrollbar {
    display: none;
}
html, body {
    width: 100%;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden !important; /* 画面全体の縦・横スクロールを完全禁止（両端固定） */
    position: fixed;            /* 画面全体を動かさず両端パネルを固定 */
    left: 0;
    top: 0;
    -ms-overflow-style: none; /* IE, Edge */
    scrollbar-width: none; /* Firefox */
}

/* --- 基本設定・リセット --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    background-color: #ffd4d7;
    /* パステルピンク */
    color: #231815;
    /* スクロールバーの発生を防止 */
    min-height: 100vh;
    /* 背景の白い大きな丸いドット */
    background-image:
        radial-gradient(#fff0f1 35%, transparent 35%),
        radial-gradient(#fff0f1 35%, transparent 35%);
    background-size: 200px 200px;
    background-position: 0 0, 100px 100px;
    /* 斜め左へ流れるアニメーションを適用 (等速・無限ループ) */
    animation: dot-bg-flow 20s linear infinite;
}

/* 全体レイアウト */
.app-container {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 900px;
    /* ファーストビュー高さ900pxの担保 */
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden !important; /* 両端含む全体領域の溢れを完全カット */
}

/* 左右サイドパネル */
.side-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
    z-index: 10;
    position: relative;
}

/* --- 左パネル (左側スペースの中央に配置) --- */
.left-panel {
    position: absolute;
    left: max(40px, calc(25% - 276px));
    /* 画面左端からスマホ左端までの空き領域の中央に自動配置 */
    top: 0;
    width: 360px;
    height: 100vh;
    min-height: 900px;
    /* 画面の高さ全体に広げる */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* 上・中・下に均等配置 */
    padding: 40px 10px 40px 10px; /* 上下に安全マージンを設ける */
    box-sizing: border-box;
}

/* 左パネル最上部のヘッダー（ロゴと3色丸ドットを横並び） */
.left-panel-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 中央グループ（採用バッジ、SNS、キャラクターダミーをまとめ縦中央に固定） */
.left-panel-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 25px;
    margin: auto 0; /* フレックスコンテナの中で自動的に上下中央に配置する */
    padding: 20px 0;
    box-sizing: border-box;
}

.logo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-decoration: none;
    cursor: pointer;
    transform: translateX(-110px); /* 左端ぴったりへ移動 */
}

.main-logo {
    width: 60px;
    height: auto;
    filter: none !important; /* 色変えテーマの影響を受けないように固定 */
}

.company-name-sub {
    font-size: 0.65rem;
    font-weight: 700;
    color: #231815;
    letter-spacing: 0.05em;
}

/* Figma上部の丸ドット（サイズ拡大＆スマホ隣に寄せる） */
.color-dots {
    display: flex;
    gap: 14px;
    margin-left: auto; /* 右（スマホフレーム側）へ寄せる */
    transform: translateX(120px); /* スマホフレームのすぐ脇へ大きく移動 */
}

.dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer; /* クリック可能に変更 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.dot:hover {
    transform: scale(1.2); /* ホバー時に大きく弾む */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

.dot:active {
    transform: scale(0.92);
}

/* 選択された色の丸（アクティブ状態：白フチ＋影強調） */
.dot.active {
    box-shadow: 0 0 0 3.5px #ffffff, 0 5px 12px rgba(0, 0, 0, 0.25);
    transform: scale(1.15);
}

.dot-pink {
    background-color: #ea6182;
}

.dot-blue {
    background-color: #009dda;
}

.dot-yellow {
    background-color: #fcc800;
}

/* 採用情報バッジ (モコモコ・ダミーキャラクターはみ出し - ユーザー指定: W309 H309) */
.recruit-badge-wrapper {
    position: relative;
    width: 309px;
    /* 横幅 309px */
    height: 309px;
    /* 縦幅 309px */
    margin-top: 10px;
}

/* バッジの裏からひょっこり見せるキャラクター */
.recruit-peek-character {
    position: absolute;
    top: -25px;
    left: 25px;
    width: 95px;
    height: auto;
    z-index: 1; /* バッジ(z-index:10)の背後に配置 */
    pointer-events: none;
    transform: rotate(-12deg); /* 通常時も左に傾ける */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ホバー時にバッジの裏からぐっと競り上がって顔を出す */
.recruit-badge-wrapper:hover .recruit-peek-character {
    transform: translateY(-48px) rotate(-15deg);
}

.recruit-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    filter: drop-shadow(4px 6px 0px rgba(0, 0, 0, 0.15));
    z-index: 10;
    transition: transform 0.2s ease, filter 0.2s ease;
    text-decoration: none;
}

.recruit-badge:hover {
    transform: scale(1.04) rotate(-2deg);
    filter: drop-shadow(6px 8px 0px rgba(0, 0, 0, 0.2));
}

.recruit-badge-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
}

.badge-content {
    position: relative;
    color: #fff;
    text-align: center;
    z-index: 11;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.badge-title {
    font-size: 2.3rem;
    /* さらに一回り大きく */
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
}

.badge-sub {
    font-size: 1.25rem;
    /* さらに一回り大きく */
    line-height: 1.5;
    color: #fff;
    font-weight: 500;
}

.badge-content .arrow {
    margin-top: 15px;
    width: 85px;
    /* SVGの横幅を大きく */
    height: 42px;
    /* SVGの縦幅を大きく */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: bounce-right 0.8s infinite alternate;
}

.badge-content .arrow svg {
    width: 100%;
    height: 100%;
}

@keyframes bounce-right {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(8px);
    }
}

.recruit-badge-wrapper:hover .recruit-badge {
    transform: scale(1.05) rotate(-3deg);
}

/* 足跡装飾（バッジのサイズアップに伴い、開始座標を右下に調整） */
.footprints-container {
    position: absolute;
    left: 260px;
    /* 170pxから260pxに移動し、巨大化したバッジとの重なりを防ぐ */
    top: 180px;
    /* 130pxから180pxに下げ、バッジのすぐ右下からスタートさせる */
    width: 320px;
    /* 左パネルの外（スマホ側）にはみ出させる */
    height: 250px;
    pointer-events: none;
    z-index: 5;
}

.footprint {
    position: absolute;
    width: 13px;
    height: 13px;
    opacity: 0.9;
}

.fp-1 {
    top: 90px;
    left: 15px;
    transform: rotate(120deg);
}

.fp-2 {
    top: 115px;
    left: 30px;
    transform: rotate(110deg);
}

.fp-3 {
    top: 135px;
    left: 50px;
    transform: rotate(125deg);
}

.fp-4 {
    top: 160px;
    left: 65px;
    transform: rotate(115deg);
}

.fp-5 {
    top: 175px;
    left: 90px;
    transform: rotate(100deg);
}

.fp-6 {
    top: 185px;
    left: 115px;
    transform: rotate(85deg);
}

.fp-7 {
    top: 180px;
    left: 140px;
    transform: rotate(70deg);
}

.fp-8 {
    top: 170px;
    left: 165px;
    transform: rotate(60deg);
}

/* SNSセクション */
.check-sns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    /* 少し間隔を広げる */
    width: 300px;
    /* バッジ幅309pxに合わせて拡大 */
}

.check-title {
    font-size: 1.75rem;
    /* さらに一回り大きく */
    font-weight: 800;
    color: #231815;
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
    display: inline-block;
    animation: check-bounce 0.8s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

@keyframes check-bounce {
    0%, 100% {
        transform: translateY(0) scale(1, 1);
    }
    30% {
        transform: translateY(-12px) scale(0.95, 1.08);
    }
    50% {
        transform: translateY(0) scale(1.06, 0.92);
    }
    75% {
        transform: translateY(-5px) scale(0.98, 1.02);
    }
}

/* カプセル型の白い黒枠ボタンデザイン (サイズ拡大版) */
.sns-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border: 2.5px solid #231815;
    /* 枠線を少し太くしてクッキリと */
    border-radius: 50px;
    /* 完全なカプセル型 */
    padding: 13px 30px;
    /* パディングを増やしてボタンを大きく */
    color: #231815;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 4px 4px 0px #231815;
    /* 影も少し大きく */
    transition: all 0.15s ease;
    font-size: 1.2rem;
    /* フォントを大きく */
    width: 100%;
    box-sizing: border-box;
}

.sns-button:hover {
    background-color: #ea6182;
    color: #ffffff;
    transform: translate(1px, 1px);
    box-shadow: 3px 3px 0px #231815;
}

.sns-button .arrow-diagonal {
    font-size: 1.35rem;
    /* 矢印も大きく */
    font-weight: 900;
}

/* バナー領域（2段均等配置・全体拡大版） */
.dummy-banners-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 330px;
    flex-shrink: 0;
}

.banners-row-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

.banners-row-bottom {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* ダミーバナー用長方形プレースホルダーデザイン */
.dummy-banner-box {
    background-color: #d8d8d8;
    border: none;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 900;
    color: #666;
    border-radius: 0px;
    /* Figmaと同様に角は丸めない長方形 */
    width: calc(50% - 5px);
    /* 2つずつ均等幅に並ぶ */
    box-shadow: 1.5px 1.5px 0px rgba(0, 0, 0, 0.1);
}


/* --- 中央：スマホフレーム (画面の幾何学的な中央に完全固定) --- */
.center-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 390px;
    height: 844px;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-frame {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 45px;
    /* 右下への影をベースに、20pxのボカシを追加してソフトに広げる */
    box-shadow: 8px 10px 20px rgba(0, 0, 0, 0.12);
    position: relative;
    border: 12px solid #231815;
    overflow: hidden;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* ヘッダー */
.phone-header {
    height: 60px;
    background-color: #ea6182;
    position: relative;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 15px;
    z-index: 100;
    /* 重ね順を最前面に設定 */
    /* なみなみの輪郭に沿って、薄いグレーのボカシ影を落とす */
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.08));
}

/* ヘッダー底辺のなみなみ波型装飾 (横に流れるループアニメーション版) */
.phone-header::after {
    content: "";
    position: absolute;
    bottom: -77px;
    /* 波をヘッダーに3pxめり込ませて隙間を完全に消す */
    left: 0;
    width: 100%;
    height: 80px;
    /* 波の高さ（カーブ）を80pxに超拡大して深度を最大化 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ea6182' d='M0,0 L430,0 L430,50 C322.5,5 107.5,95 0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 430px 80px;
    /* 1周期の横幅を430pxにし、高さを80pxに設定 */
    background-position: 0 0;
    pointer-events: none;
    /* 下の要素のクリックを妨げない */
    z-index: 99;
    /* ヘッダーのすぐ裏、スクロールコンテンツよりは前面に設定 */
    animation: wave-horizontal-flow 4s linear infinite;
    /* 8秒周期にスピードアップ */
}

@keyframes wave-horizontal-flow {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -430px;
        /* 広げた周期分（左方向へ）流してループ */
    }
}


/* ハンバーガーメニューボタン */
.menu-trigger {
    background: rgba(255, 255, 255, 0.85);
    /* 白丸を85%の半透明にする */
    backdrop-filter: blur(4px);
    /* 背後を美しくすりガラス風にぼかす */
    -webkit-backdrop-filter: blur(4px);
    /* Safari対応 */
    border: none;
    /* 黒フチを削除 */
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    z-index: 10;
    /* 薄いグレーのボカシ影に変更 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    top: 5px;
    /* ボタンの位置を少し下に下げる */
}

.menu-trigger span {
    display: block;
    width: 18px;
    height: 3px;
    background-color: #231815;
    border-radius: 2px;
}

/* メニュー閉じる（×）ボタン */
.menu-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.85);
    /* 白丸を85%の半透明にする */
    backdrop-filter: blur(4px);
    /* 背後を美しくすりガラス風にぼかす */
    -webkit-backdrop-filter: blur(4px);
    /* Safari対応 */
    border: none;
    /* 黒フチを削除 */
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 20;
    /* 薄いグレーのボカシ影 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease;
}

.menu-close-btn:active {
    transform: scale(0.95);
}

.menu-close-btn svg {
    width: 20px;
    height: 20px;
}

/* ティッカー */
.ticker-wrapper {
    background-color: #fff;
    border-top: 2.2px solid #ea6182;
    /* 1本目の外側太線 */
    border-bottom: 2.2px solid #ea6182;
    /* 1本目の外側太線 */
    overflow: hidden;
    white-space: nowrap;
    padding: 7px 0;
    /* 太さのバランスをとるためのパディング */
    font-size: 1.35rem;
    /* BANの文字を大きく */
    line-height: 1;
    /* 天地の行間余白をリセットし、文字が線に被らないようにする */
    font-weight: 900;
    color: #ea6182;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    position: relative;
}

/* 2本目の内側極細線 */
.ticker-wrapper::before {
    content: "";
    position: absolute;
    top: 2.5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ea6182;
}

.ticker-wrapper::after {
    content: "";
    position: absolute;
    bottom: 2.5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ea6182;
}

.ticker-scroll-inner {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: ban-ticker-anim 10s linear infinite;
    /* 右から左へ無限ループ */
}

.ticker-track {
    display: flex;
    flex-shrink: 0;
}

.ticker-track span {
    display: inline-block;
    padding: 0 20px;
    /* 単語の左右に均等な余白を確保し、つなぎ目のカクつきを防ぐ */
}

@keyframes ban-ticker-anim {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* 完全に同一のトラックを2つ並べて50%移動させることで、完璧にシームレスループします */
    }
}

.ticker-top {
    z-index: 3;
    margin-top: 68px;
    /* 上のピンク波ヘッダーとの間に隙間を空けて少し下げる */
}

.ticker-bottom {
    z-index: 3;
    margin-top: 0;
}

/* スクロール可能なインナーコンテンツ */
.phone-scrollable-content {
    flex-grow: 1;
    min-height: 0;
    /* 高さが伸びきるのを防止し、画面内に収める */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none;
    /* Firefox */
}

.phone-scrollable-content::-webkit-scrollbar {
    display: none;
    /* WebKit */
}

/* タイプライターの点滅カーソル (CSS擬似要素化によりDOM再構築負荷を完全解消) */
.about-lead-text p.is-typing::after {
    content: '';
    display: inline-block;
    width: 2.5px;
    height: 1.1em;
    background-color: #231815;
    margin-left: 2px;
    animation: blink-caret 0.75s step-end infinite;
    vertical-align: text-bottom;
}

@keyframes blink-caret {
    from, to { opacity: 0; }
    50% { opacity: 1; }
}

/* メイン動画コンテンツエリア */
.main-content-video {
    height: 100%;
    /* 1画面分の高さに固定 */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    position: relative;
}

/* --- About us セクション --- */
.about-us-section {
    background-color: #ea6182;
    /* Figmaと同色のピンク背景 */
    padding: 60px 0 80px 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 縦書き見出し */
.about-vertical-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 1.8rem;
    font-weight: 900;
    /* 800から900（極太）に引き上げ */
    color: #fff;
    /* 白文字 */
    letter-spacing: 0.35em;
    line-height: 1.6;
    margin: 0 auto 40px auto;
    /* もわっとアニメーションの初期状態 */
    opacity: 0;
    filter: blur(8px);
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, filter 1.5s ease-out, transform 1.5s ease-out;
}

.about-vertical-title.mowatto-active {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}


/* レンガ調ブロックパターン */
.brick-pattern-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 50px;
    overflow: hidden;
}

.brick-row {
    display: flex;
    width: max-content;
    flex-shrink: 0;
}

.brick-track {
    display: flex;
    gap: 12px;
    padding-right: 12px;
    flex-shrink: 0;
}

.brick-row-1,
.brick-row-3 {
    animation: brick-anim-right 15s linear infinite;
}

.brick-row-2 {
    animation: brick-anim-left 15s linear infinite;
}

@keyframes brick-anim-left {
    0% { transform: translateX(-40px); }
    100% { transform: translateX(calc(-50% - 40px)); }
}

@keyframes brick-anim-right {
    0% { transform: translateX(calc(-50% - 10px)); }
    100% { transform: translateX(-10px); }
}

.brick-item {
    background-color: #e0e0e0;
    /* グレーのプレースホルダー色 */
    border-radius: 12px;
    width: 120px;
    height: 85px;
    flex-shrink: 0;
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.05);
}

/* リードメッセージテキスト */
.about-lead-text {
    text-align: center;
    color: #fff;
    font-size: 0.95rem;
    line-height: 2.1;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin: 60px auto 0;
    padding: 0 25px;
    position: relative;
    z-index: 2;
}

.about-lead-text p {
    margin: 0 0 10px 0;
    min-height: 2.1em;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.0s ease-out, transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

/* スクロールで登場した際に、すべての段落文章（全15行）をじっくりゆったり表示 */
.about-lead-text.lead-fade-active p {
    opacity: 1;
    transform: translateY(0);
}


/* キラキラ星（絶対配置） */
.sparkle {
    position: absolute;
    color: #fcc800;
    /* 黄色の星 */
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 3;
    pointer-events: none;
    user-select: none;
}

.sp-1 {
    top: 440px;
    right: 90px;
}

.sp-2 {
    top: 520px;
    right: 35px;
    font-size: 1.1rem;
}

.sp-3 {
    top: 600px;
    left: 35px;
}

.sp-4 {
    top: 690px;
    right: 40px;
    font-size: 1.1rem;
}

.sp-5 {
    bottom: 90px;
    left: 110px;
}

/* キャラクターダミー (Figma風なみなみ枠＆影) */
.char-dummy {
    position: absolute;
    width: 75px;
    height: 75px;
    background-image: url("image/saiyoubazzi.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(3px 4px 0px rgba(0, 0, 0, 0.18));
    /* Figmaの黒い影 */
    z-index: 4;
    transition: transform 0.2s ease;
}

.char-dummy:hover {
    transform: scale(1.05);
}

.char-dummy-inner {
    width: 82%;
    height: 82%;
    background-color: #d2d2d2;
    /* ダミー画像グレー */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #555;
    font-size: 0.55rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.25;
}

.char-dummy-1 {
    top: 460px;
    right: 15px;
}

.char-dummy-2 {
    top: 710px;
    right: 15px;
}

.char-dummy-3 {
    bottom: 85px;
    left: 15px;
}

/* 底辺の白波境界 */
.about-bottom-wave {
    position: absolute;
    bottom: -77px;
    /* 白背景のNewsセクションへ77px分はみ出して重なるように配置 */
    left: 0;
    width: 100%;
    height: 80px;
    /* ヘッダーの波と同じ80pxの高さ */
    z-index: 5;
    /* ヘッダーと同じピンクの波SVGを背景に指定 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ea6182' d='M0,0 L430,0 L430,50 C322.5,5 107.5,95 0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 430px 80px;
    background-position: 0 0;
    pointer-events: none;
    /* ヘッダーの波と同じ8秒ループアニメーションを適用 */
    animation: wave-horizontal-flow 4s linear infinite;
}

.about-bottom-wave svg {
    display: none;
    /* 既存の静止SVGは非表示にします */
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* スライドショーのコンテナ */
.video-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

/* 各スライド画像 */
.video-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    filter: grayscale(100%) contrast(1.1); /* モノクロ化 ＋ コントラスト調整 */
    transition: opacity 1.5s ease-in-out; /* 1.5秒かけてフェード切り替え */
}

/* アクティブな（表示中の）スライド */
.video-slide.active {
    opacity: 1;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.vertical-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 2.8rem;
    font-weight: 900;
    /* 極太に引き上げ */
    color: #ffffff;
    letter-spacing: 0.3em;
    line-height: 1.5;
    text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.4);
    opacity: 0;
    animation: fadeInTitle 1.5s ease-out forwards 0.3s;
}

@keyframes fadeInTitle {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.video-memo {
    position: absolute;
    bottom: 25px;
    font-size: 0.75rem;
    color: #999;
}

/* フッター */
.phone-footer {
    height: 90px;
    background-color: #ea6182;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 0 15px 15px;
    z-index: 5;
}

.footer-naminami {
    position: absolute;
    top: -32px;
    left: 0;
    width: 100%;
    height: 40px;
    overflow: hidden;
}

.wave-svg-footer {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.about-tab-btn {
    background-color: #fff;
    border: 3px solid #231815;
    border-radius: 8px;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #231815;
    text-decoration: none;
    box-shadow: 2px 2px 0px #231815;
}


/* --- 右パネル (画面右端の中央に固定・トリミング画像用・傾き＆重なりなし) --- */
.right-panel {
    position: absolute;
    right: 40px;
    top: 50%;
    /* 縦中央揃え(translateY)を維持したまま、お問い合わせタブも含めて全体を90%に等倍縮小 */
    transform: translateY(-50%) scale(0.9);
    transform-origin: right center;
    /* 右端中央を基準にして縮小 */
    width: 680px;
    align-items: stretch;
}

/* ボタン群のベースコンテナ */
.menu-stickers {
    position: relative;
    width: 100%;
    height: 820px;
    /* Accessの引き下げに伴い高さを820pxに拡張 */
}

/* 画像ボタン基本スタイル */
.sticker-btn {
    position: absolute;
    display: block;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: transform 0.2s ease;
    outline: none;
    transform: none;
    /* 傾きを無効化 */
    /* お問い合わせボタンと同じ影 (4px右、6px下、ぼかしなしの15%黒ベタ影) を適用 */
    filter: drop-shadow(4px 6px 0px rgba(0, 0, 0, 0.15));
}

.sticker-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* === 個別のボタンサイズ（横幅）と絶対座標（top / left / right） === */

/* 1. TOP (左上) */
.btn-top {
    width: 385px;
    top: 10px;
    left: 10px;
}

.btn-top:hover {
    transform: translateY(-5px) scale(1.03);
}

/* 2. NEWS (右上) */
.btn-news {
    width: 273px;
    top: 10px;
    right: 20px;
}

.btn-news:hover {
    transform: translateY(-5px) scale(1.03);
}

/* 3. About us (中段、左寄り楕円) */
.btn-about {
    width: 330px;
    top: 164px;
    left: 10px;
}

.btn-about:hover {
    transform: translateY(-5px) scale(1.03);
}

/* 4. FAQ (中下段、左側看板) */
.btn-faq {
    width: 320px;
    top: 320px;
    left: 10px;
}

.btn-faq:hover {
    transform: translateY(-5px) scale(1.03);
}

/* 5. Portfolio (中下段、右側丸型スタンプ) */
.btn-portfolio {
    width: 314px;
    top: 306px;
    right: -3px;
}

.btn-portfolio:hover {
    transform: translateY(-5px) scale(1.03);
}

/* 6. Our Departments (下段、左寄り矢印) */
.btn-departments {
    width: 340px;
    top: 520px;
    left: 10px;
}

.btn-departments:hover {
    transform: translateY(-5px) scale(1.03);
}

/* 7. Access (最下段、左フチつき文字 - ユーザー要望によりさらに下に配置: top 700px) */
.btn-access {
    width: 317px;
    top: 700px;
    left: 20px;
}

.btn-access:hover {
    transform: translateY(-5px) scale(1.03);
}

/* 8. Recruit (最下段、右羽つき看板 - Accessに合わせてtopを690pxに調整) */
.btn-recruit {
    width: 287px;
    top: 648px;
    right: 20px;
}

.btn-recruit:hover {
    transform: translateY(-5px) scale(1.03);
}


/* お問い合わせボタン */
.contact-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    background-color: #231815;
    color: #fff;
    text-decoration: none;
    padding: 18px 30px;
    border-radius: 40px;
    font-weight: 900;
    box-shadow: 4px 6px 0px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    width: 520px;
    align-self: center;
    text-align: center;
    font-size: 1.2rem;
    border: 3.5px solid #231815;
    margin-top: 25px;
}

.contact-button:hover {
    transform: translateY(-3px);
    box-shadow: 6px 9px 0px rgba(0, 0, 0, 0.2);
}

.contact-button .arrow-up {
    transform: rotate(-45deg);
}


/* --- スマホ用オーバーレイメニュー --- */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(234, 97, 130, 0.98);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.overlay-menu.active {
    opacity: 1;
    pointer-events: auto;
}

.overlay-nav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
    width: 85%;
    max-width: 400px;
}

.menu-item {
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    padding: 8px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    transition: all 0.2s ease;
}

.menu-item small {
    font-size: 0.95rem;
    opacity: 0.9;
}

.menu-item:hover {
    transform: scale(1.05);
    color: #fcc800;
}

.menu-item.highlight {
    background-color: #231815;
    color: #fff;
    border: none;
    border-radius: 40px;
    justify-content: center;
    font-size: 1.3rem;
    margin-top: 15px;
}


/* --- レスポンシブ設計 (タブレット・スマホサイズ) --- */
@media (max-width: 1450px) {
    body {
        overflow: auto;
        /* レスポンシブ時はスクロール可能にする */
    }

    .app-container {
        height: auto;
        min-height: auto;
    }

    .side-panel {
        display: none;
    }

    .center-panel {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100vw;
        height: 100vh;
        max-width: 480px;
        max-height: 100%;
        margin: 0 auto;
    }

    .phone-frame {
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .phone-screen {
        border-radius: 0;
    }
}

/* --- News セクション --- */
.news-section {
    background-color: #ffffff;
    /* 白背景 */
    padding: 60px 0 80px 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 袋文字のNews見出し */
.news-section-title {
    /* font-family: 'Zen Kaku Gothic New', sans-serif; */
    font-size: 2.3rem;
    font-weight: 900;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1.5px #231815;
    /* 黒いフチ線 */
    margin: 0 auto 35px auto;
    letter-spacing: 0.05em;
    display: block;
}

/* ニュースカードのリスト */
.news-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
    /* カード同士の間隔 */
    width: 100%;
}

/* ニュースカード本体 */
.news-card {
    position: relative;
    width: 82%;
    background-color: #fcdde4;
    /* 薄ピンク背景 */
    border: 2.5px solid #231815;
    /* 黒ふち枠線 */
    padding: 20px 20px 0 20px;
    box-shadow: 6px 6px 0px #231815;
    /* 黒いオフセットシャドウ */
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
    z-index: 2;
}

.news-date {
    font-size: 0.95rem;
    font-weight: 700;
    color: #231815;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

/* 白色の画像用ダミープレースホルダー */
.news-image-dummy {
    background-color: #ffffff;
    border: 2px solid #231815;
    border-radius: 12px;
    width: 100%;
    height: 160px;
    flex-shrink: 0;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.news-card-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #231815;
    line-height: 1.45;
    margin: 0 0 10px 0;
}

/* ピンクの区切り破線（点線） */
.news-divider {
    border: none;
    border-top: 2px dashed #ea6182;
    margin: 5px 0 12px 0;
    width: 100%;
}

.news-card-body {
    font-size: 0.82rem;
    font-weight: 600;
    color: #231815;
    line-height: 1.7;
    margin: 0 0 20px 0;
    text-align: left;
}

.news-link-highlight {
    color: #ea6182;
    text-decoration: underline;
    font-weight: bold;
}

/* カード最下部のNEWS帯 */
.news-card-footer-band {
    background-color: #ea6182;
    color: #ffffff;
    margin-left: -20px;
    margin-right: -20px;
    font-size: 0.8rem;
    font-weight: 900;
    padding: 8px 0;
    border-top: 2.5px solid #231815;
    box-sizing: content-box;
    overflow: hidden;
    white-space: nowrap;
}

.news-ticker-inner {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: ban-ticker-anim 8s linear infinite;
}

.news-ticker-track {
    display: flex;
    flex-shrink: 0;
}

.news-ticker-track span {
    display: inline-block;
    padding: 0 15px;
    letter-spacing: 0.1em;
}

/* トゲトゲスタンプ装飾のベース */
@keyframes rotateClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.news-badge {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(1.5px 1.5px 0px rgba(0, 0, 0, 0.1));
    animation: rotateClockwise 10s linear infinite;
}

/* トゲトゲバッジ 1: ピンクスタンプ (枠線付き) */
.badge-pink-spiky {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ea6182' stroke='%23231815' stroke-width='4' stroke-linejoin='round' d='M50 5 L55 15 L65 10 L67 21 L77 19 L76 30 L85 30 L82 40 L90 43 L85 52 L91 58 L84 65 L88 74 L79 77 L80 88 L70 87 L68 97 L59 93 L55 100 L47 97 L40 100 L37 91 L27 94 L26 84 L16 83 L20 73 L11 70 L18 61 L11 52 L20 47 L14 37 L24 36 L21 25 L31 27 L32 16 L41 20 Z'/%3E%3C/svg%3E");
}

/* トゲトゲバッジ 2: 黒スタンプ */
.badge-black-spiky {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23231815' d='M50 5 L55 15 L65 10 L67 21 L77 19 L76 30 L85 30 L82 40 L90 43 L85 52 L91 58 L84 65 L88 74 L79 77 L80 88 L70 87 L68 97 L59 93 L55 100 L47 97 L40 100 L37 91 L27 94 L26 84 L16 83 L20 73 L11 70 L18 61 L11 52 L20 47 L14 37 L24 36 L21 25 L31 27 L32 16 L41 20 Z'/%3E%3C/svg%3E");
}

/* トゲトゲバッジ 3: 黒星型 */
.badge-black-star {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23231815' d='M50 5 L60 25 L82 15 L72 38 L95 40 L74 55 L85 78 L62 68 L58 92 L45 74 L25 87 L32 63 L10 60 L30 45 L15 25 L38 31 L42 10 Z'/%3E%3C/svg%3E");
}

/* バッジの各配置 (Figma画像準拠) */
/* カード1 */
.badge-pos-tr {
    top: -20px;
    right: -20px;
    width: 48px;
    height: 48px;
}

.badge-pos-ml {
    top: 100px;
    left: -25px;
    width: 44px;
    height: 44px;
}

/* カード2 */
.badge-pos-tr-c2 {
    top: -22px;
    right: 25px;
    width: 32px;
    height: 32px;
}

.badge-pos-ml-c2 {
    top: 80px;
    left: -24px;
    width: 46px;
    height: 46px;
}

.badge-pos-bl-c2 {
    top: 145px;
    left: -14px;
    width: 34px;
    height: 34px;
}

.badge-pos-br-c2 {
    bottom: 50px;
    right: -22px;
    width: 40px;
    height: 40px;
}

.badge-pos-br-c2~.news-card-footer-band {
    z-index: 1;
    /* 帯との重なり順調整 */
}

/* moreボタンデザイン (ピンク枠の白いカプセル型) */
.more-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 35px;
    width: 100%;
}

.more-btn {
    display: flex;
    align-items: center;
    border: 2.5px solid #ea6182;
    /* ピンクフチ */
    border-radius: 50px;
    background-color: #ffffff;
    text-decoration: none;
    padding-left: 26px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
}

.more-btn:hover {
    transform: scale(1.03);
}

.more-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ea6182;
    /* ピンク文字 */
    margin-right: 15px;
    letter-spacing: 0.05em;
}

.more-plus {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ea6182;
    /* 右側プラス部分のピンク背景 */
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 3px;
}

/* --- Our Departments (紹介) セクション --- */
.departments-section {
    background-color: #ea6182;
    /* ピンク背景 */
    padding: 0 0 60px 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 上部の波線境界 */
.departments-top-wave {
    position: absolute;
    top: -77px;
    /* 上のNewsセクションに77px食い込ませて隙間をなくす */
    left: 0;
    width: 100%;
    height: 80px;
    /* 波の高さ80px */
    z-index: 5;
    /* ヘッダーと同じピンクの波SVGを背景に指定 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ea6182' d='M0,0 L430,0 L430,50 C322.5,5 107.5,95 0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 430px 80px;
    background-position: 0 0;
    pointer-events: none;
    /* 上下反転（scaleY(-1)）させることで、上が波打つ形状にします */
    transform: scaleY(-1);
    /* ヘッダーと同じ8秒ループアニメーションを適用 */
    animation: wave-horizontal-flow 4s linear infinite;
}

.departments-top-wave svg {
    display: none;
    /* 既存の静止SVGは非表示にします */
}

/* 部署ブロック */
.dept-block {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 35px 20px 35px 0;
    box-sizing: border-box;
}

/* 部署タイトル (袋文字風＋かわいいポップインアニメーション) */
.dept-title {
    /* font-family: 'Zen Kaku Gothic New', sans-serif; */
    font-size: 2.5rem;
    font-weight: 900;
    text-align: left;
    color: #ffffff;
    -webkit-text-stroke: 2.5px #231815;
    /* 黒ふち枠 */
    text-shadow: 2.5px 2.5px 0px #231815;
    margin: 0 0 20px 20px;
    letter-spacing: 0.05em;
    z-index: 3;
    display: block;
    opacity: 0;
    transform: scale(0.4);
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

/* スクロール視界に入ったときのかわいい「ぽんっ！」登場アニメーション */
.dept-title.dept-title-pop {
    animation: cutePopIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes cutePopIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    60% {
        opacity: 1;
        transform: scale(1.12);
    }
    82% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 後日画像を入れるための白いホワイトボックス (黒ふち＋極太影) */
.dept-image-placeholder {
    width: 93%;
    height: 380px;
    background-color: #ffffff;
    /* 白地であけておく */
    border: 2.5px solid #231815;
    border-radius: 0 20px 20px 0;
    box-shadow: 4px 6px 0px #231815;
    /* 黒い極太の影 */
    box-sizing: border-box;
    z-index: 2;
    margin-left: -5px;
    margin-bottom: 18px;
    opacity: 0;
}

/* 企画・営業 (#dept-1) と 印刷 (#dept-3) の画像：左から「みょんっ」 */
#dept-1 .dept-image-placeholder,
#dept-3 .dept-image-placeholder {
    transform: translateX(-100px) scaleX(0.5);
    transform-origin: left center;
}

#dept-1.img-myon-active .dept-image-placeholder,
#dept-3.img-myon-active .dept-image-placeholder {
    animation: myonSlideLeft 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.25s forwards;
}

/* クリエイティブ (#dept-2) の画像：右から「みょんっ」 */
#dept-2 .dept-image-placeholder {
    transform: translateX(100px) scaleX(0.5);
    transform-origin: right center;
}

#dept-2.img-myon-active .dept-image-placeholder {
    animation: myonSlideRight 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.25s forwards;
}

/* 左からみょんと伸びて現れるアニメーション */
@keyframes myonSlideLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px) scaleX(0.5);
    }
    60% {
        opacity: 1;
        transform: translateX(12px) scaleX(1.08);
    }
    80% {
        transform: translateX(-4px) scaleX(0.96);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}

/* 右からみょんと伸びて現れるアニメーション */
@keyframes myonSlideRight {
    0% {
        opacity: 0;
        transform: translateX(100px) scaleX(0.5);
    }
    60% {
        opacity: 1;
        transform: translateX(-12px) scaleX(1.08);
    }
    80% {
        transform: translateX(4px) scaleX(0.96);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}

/* 部署説明文 (白文字・左揃え) */
.dept-desc {
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.85;
    text-align: left;
    width: 88%;
    margin: 0 auto;
    z-index: 2;
    letter-spacing: 0.02em;
}

/* 2. クリエイティブ (右寄せ・右見切れレイアウト) */
#dept-2 {
    align-items: flex-end;
    padding: 35px 0 35px 20px;
}

#dept-2 .dept-title {
    margin: 0 20px 20px 0;
}

#dept-2 .dept-image-placeholder {
    margin-left: auto;
    margin-right: -5px;
    border-radius: 20px 0 0 20px;
    box-shadow: -4px 6px 0px #231815;
}

#dept-2 .dept-desc {
    margin: 0 0 0 auto;
    text-align: left;
}

/* 雲の立体バッジ (画像) */
.cloud-badge {
    position: absolute;
    pointer-events: none;
    z-index: 25;
    filter: drop-shadow(2px 3px 0px rgba(0, 0, 0, 0.18));
    animation: float-cloud 4s ease-in-out infinite alternate;
    opacity: 0; /* 初期表示でのチラつき防止 */
}

@keyframes float-cloud {
    0% { transform: translateY(-8px); }
    100% { transform: translateY(8px); }
}

/* 雲の配置（枠外からの位置。Y軸の初期位置やスクロール追従はJSで行う） */
.cloud-pos-1 {
    right: -70px;
    width: 150px;
    height: auto;
    animation-delay: 0s;
}

.cloud-pos-2 {
    right: -60px;
    width: 140px;
    height: auto;
    animation-delay: -1s;
}

.cloud-pos-3 {
    left: -80px;
    width: 160px;
    height: auto;
    animation-delay: -2s;
}

.cloud-pos-4 {
    right: -75px;
    width: 155px;
    height: auto;
    animation-delay: -0.5s;
}

/* 波点線ガイドライン */
.trail-container {
    width: auto; /* スマホ枠幅いっぱいに広げる */
    position: relative;
    margin-top: 20px;
}

#dept-1 .trail-container {
    margin-right: -20px; /* 右側のパディング分伸ばす */
}

#dept-2 .trail-container {
    margin-left: -20px; /* 左側のパディング分伸ばす */
}

.trail-line-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 点線上の耳付き黒うさぎ画像 */
.trail-char-img {
    position: absolute;
    width: 28px; /* うさぎのサイズ */
    height: auto;
    z-index: 4;
    bottom: 0;
    will-change: left, bottom, transform;
    cursor: pointer; /* クリック可能であることを示す */
    
    /* 見た目は変えずにクリック領域だけを上下左右に広げる設定 */
    padding: 12px;
    margin-left: -12px;
    margin-bottom: -12px;
    box-sizing: content-box; /* paddingで画像が縮まないように固定 */
}

/* 印刷機についてもっと見る！ボタン (黒フチ白カプセル型) */
.dept-btn-container {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    width: 100%;
}

.dept-more-btn {
    display: flex;
    align-items: center;
    border: 2.5px solid #231815;
    /* 黒いフチ */
    border-radius: 50px;
    background-color: #ffffff;
    text-decoration: none;
    padding-left: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 3.5px 3.5px 0px #231815;
    /* 黒いオフセット影 */
}

.dept-more-btn:hover {
    transform: scale(1.03);
}

.dept-btn-text {
    font-size: 0.95rem;
    font-weight: 800;
    color: #231815;
    margin-right: 12px;
    letter-spacing: 0.02em;
}

.dept-btn-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #231815;
    /* 黒丸背景 */
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 3px;
}

.dept-btn-arrow svg {
    width: 13px;
    height: 13px;
}

/* 最下部キャラクター＋足跡 */
.dept-footer-character {
    position: relative;
    width: 100%;
    height: 180px; /* キャラクター拡大に伴い高さを調整 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* ウサギと吹き出しをセットで跳ねさせるラッパー */
.footer-char-wrapper {
    position: absolute;
    bottom: 0;
    left: 150%; /* 初期状態は右枠外に隠す */
    width: 100px; /* ウサギの横幅と同じ */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    z-index: 4;
    transition: left 3.8s cubic-bezier(0.16, 1, 0.3, 1); /* 右からスライドインする動き */
}

/* 画面内に入ってアクティブになったら中央へ移動 */
.footer-char-wrapper.active {
    left: calc(50% - 50px);
}

/* 縦にぴょんぴょん跳ねるインナーラッパー */
.footer-char-bounce-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transform-origin: bottom center;
}

.footer-char-wrapper.active .footer-char-bounce-wrapper {
    /* 画面内に入ったらぴょんぴょん跳ねる（着地クッション付き） */
    animation: footer-bounce 0.8s ease-in-out infinite;
}

@keyframes footer-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-16px); /* 跳ねる高さ */
    }
}

.footer-char-img {
    width: 100px; /* キャラクターサイズを調整 */
    height: auto;
    z-index: 4;
    margin-bottom: -4px;
}

/* キャラクターの上の「！」吹き出し */
.footer-balloon {
    position: absolute;
    bottom: 125px; /* キャラクターにかぶらないよう少し上へ上げる */
    left: calc(50% - 20px); /* ラッパーの幅(100px)基準で中央寄せ */
    background-color: #231815;
    color: #ffffff;
    font-weight: 900;
    font-size: 1.05rem; /* 全体的に拡大 */
    padding: 7px 13px; /* 全体的に拡大 */
    border-radius: 12px;
    z-index: 5;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
    
    /* 初期状態は非表示（縮小＆透明） */
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transform-origin: bottom center; /* 下側からふくらむように出現 */
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-balloon::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: #231815 transparent;
}

/* ウサギ画像にホバーしたとき、または吹き出し自体にホバーしたときに表示 */
.footer-char-img:hover + .footer-balloon,
.footer-balloon:hover {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* 足元の影 */
.footer-char-shadow {
    position: absolute;
    bottom: -3px; /* 地面に固定 (ウサギのmargin-bottomを考慮) */
    left: calc(50% - 20px); /* 中央寄せ（幅40pxの半分） */
    width: 40px;
    height: 6px;
    background-color: rgba(35, 24, 21, 0.22); /* キャラクターの黒フチに近い焦げ茶系の透過色 */
    border-radius: 50%;
    z-index: 3; /* ウサギより背面 */
    transform-origin: center center;
    opacity: 0; /* 初期状態は非表示（画面外） */
    transition: opacity 1s ease;
}

.footer-char-wrapper.active .footer-char-shadow {
    opacity: 1;
    /* ウサギのジャンプと連動して影が変化するアニメーション */
    animation: footer-shadow-change 0.8s ease-in-out infinite;
}

@keyframes footer-shadow-change {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.6); /* ウサギが空中にいるときは小さく薄く */
        opacity: 0.4;
    }
}


/* 底辺の波型境界 */
.departments-bottom-wave {
    position: absolute;
    bottom: -77px; /* 下の実績セクションに食い込ませる */
    left: 0;
    width: 100%;
    height: 80px; /* 波の高さ80px */
    z-index: 5;
    /* ヘッダーと同じピンクの波SVGを背景に指定 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ea6182' d='M0,0 L430,0 L430,50 C322.5,5 107.5,95 0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 430px 80px;
    background-position: 0 0;
    pointer-events: none;
    /* 下側が波打つ形状にするため反転なし */
    transform: scaleY(1);
    /* 流れる波アニメーションを適用 */
    animation: wave-horizontal-flow 4s linear infinite;
}

.departments-bottom-wave svg {
    display: none; /* 既存の静止SVGは非表示 */
}

/* --- Portfolio (制作実績) セクション --- */
.portfolio-section {
    background-color: #ffffff;
    /* 白背景 */
    padding: 110px 0 100px 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 制作実績メインカード */
.portfolio-card {
    position: relative;
    width: 82%;
    background-color: #fcdde4;
    /* 薄ピンク背景 */
    border: 2.5px solid #231815;
    /* 黒太枠線 */
    border-radius: 18px;
    padding: 25px 16px 20px 16px;
    box-shadow: 6px 6px 0px #231815;
    /* 黒い影 */
    display: flex;
    flex-direction: column;
    overflow: visible;
    box-sizing: border-box;
    margin: 0 auto;
    z-index: 2;
}

/* 「制作実績」タイトル (袋文字風) */
.portfolio-title {
    /* font-family: 'Zen Kaku Gothic New', sans-serif; */
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #231815;
    /* 黒ふち枠 */
    margin: 0 auto 20px auto;
    letter-spacing: 0.05em;
    z-index: 3;
    display: block;
}

/* スライダーレイアウト */
.portfolio-slider-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

/* スライダー白枠 */
.slider-image-placeholder {
    background-color: #ffffff;
    border: 2.5px solid #231815;
    border-radius: 14px;
    width: 100%;
    height: 220px;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.portfolio-slides-wrapper {
    display: flex;
    width: 1100%; /* 11つのスライド分 */
    height: 100%;
}

.portfolio-slide {
    width: calc(100% / 11); /* 100% / 11 */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.slide-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
    pointer-events: auto; /* タップ・クリック可能に変更 */
    user-select: none;
}

/* 実績テキスト (濃いピンク文字) */
.portfolio-details {
    text-align: center;
    font-family: 'Kiwi Maru', sans-serif;
    margin-bottom: 15px;
    padding: 0 5px;
    width: 100%;
    height: 65px; /* 高さを完全固定 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: visible;
}

.portfolio-client {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ea6182;
    margin: 0 0 4px 0;
    white-space: nowrap;
    display: block;
    width: 100%;
    text-align: center;
    transform-origin: center center;
}

.portfolio-work {
    font-size: 1.25rem;
    font-weight: 900;
    color: #ea6182;
    margin: 0;
    white-space: nowrap;
    display: block;
    width: 100%;
    text-align: center;
    transform-origin: center center;
}

/* 左右のスライドボタン (丸枠なし・矢印文字のみ) */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: transparent;
    border: none;
    font-size: 1.8rem; /* ◀▶を大きくして押しやすく */
    color: #ea6182; /* 濃いピンク */
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    user-select: none;
    outline: none;
}

.slider-arrow:hover {
    opacity: 0.7;
}

.slider-arrow:active {
    transform: translateY(-50%) scale(0.85);
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}


/* つまみ付きシークバーレール (位置完全固定) */
.portfolio-seekbar-container {
    width: 90%;
    height: 26px;
    margin: 0 auto 10px auto;
    position: relative;
    padding: 10px 0;
    box-sizing: border-box;
}

.seekbar-track {
    height: 6px;
    background-color: #ffffff;
    /* 白いレール */
    border-radius: 3px;
    position: relative;
    width: 100%;
}

.seekbar-thumb {
    position: absolute;
    left: 15%;
    /* 仮の位置(つまみ) */
    top: 50%;
    transform: translateY(-50%);
}

/* つまみ画像(黒ウサギ) */
.seekbar-char-img {
    position: absolute;
    top: -21px; /* 線の上に足元が乗るように調整 */
    left: -19px; /* 幅38pxの半分を左にずらす */
    width: 38px;
    height: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 6;
}

.seekbar-char-img:active {
    cursor: grabbing;
}

/* うねうね立体波バッジ (紫・ピンク) */
.wave-sticker {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 5;
    filter: drop-shadow(2px 3px 0px rgba(0, 0, 0, 0.18));
}

.wave-sticker-purple {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath fill='%23a1a5ec' stroke='%23231815' stroke-width='4.5' stroke-linejoin='round' d='M 10 20 C 25 5, 35 5, 50 20 C 65 35, 75 35, 90 20 C 105 5, 110 20, 110 20 L 110 30 C 110 30, 105 15, 90 30 C 75 45, 65 45, 50 30 C 35 15, 25 15, 10 30 Z'/%3E%3C/svg%3E");
}

.wave-sticker-pink {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40'%3E%3Cpath fill='%23fcaec0' stroke='%23231815' stroke-width='4.5' stroke-linejoin='round' d='M 10 20 C 25 5, 35 5, 50 20 C 65 35, 75 35, 90 20 C 105 5, 110 20, 110 20 L 110 30 C 110 30, 105 15, 90 30 C 75 45, 65 45, 50 30 C 35 15, 25 15, 10 30 Z'/%3E%3C/svg%3E");
}

/* スマホ枠外のにょろにょろ共通バッジ */
.nyoro-badge {
    position: absolute;
    pointer-events: none;
    z-index: 25;
    filter: drop-shadow(2px 3px 0px rgba(0, 0, 0, 0.15));
    opacity: 0; /* 初期表示でのチラつき防止 */
}

/* 実績セクション用 (右側はみ出し) */
.nyoro-pos-1 {
    right: -45px;
    width: 134px;
    height: auto;
}

/* よくある質問用 (左側はみ出し) */
.nyoro-pos-2 {
    left: -45px;
    width: 134px;
    height: auto;
}

/* カード左下配置 (カード外・背景白の上に浮かぶ) */
.wave-pos-bl {
    bottom: -15px;
    left: -10px;
    width: 85px;
    height: 30px;
    transform: rotate(-5deg);
    z-index: 1;
}

.wave-pos-bl-sub {
    bottom: -35px;
    left: -25px;
    width: 85px;
    height: 30px;
    transform: rotate(-5deg);
    z-index: 1;
}

/* カード外右下の足跡装飾 (上へトコトコ伸びる) */
.portfolio-footprints {
    position: absolute;
    bottom: -80px;
    right: 25px;
    width: 60px;
    height: 160px;
    pointer-events: none;
    z-index: 1;
}

.pf-fp {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0.8;
}

.pf-fp-1 {
    bottom: 10px;
    right: 5px;
    transform: rotate(10deg);
}

.pf-fp-2 {
    bottom: 30px;
    right: 18px;
    transform: rotate(20deg);
}

.pf-fp-3 {
    bottom: 50px;
    right: 8px;
    transform: rotate(15deg);
}

.pf-fp-4 {
    bottom: 70px;
    right: 20px;
    transform: rotate(5deg);
}

.pf-fp-5 {
    bottom: 90px;
    right: 10px;
    transform: rotate(15deg);
}

.pf-fp-6 {
    bottom: 110px;
    right: 22px;
    transform: rotate(25deg);
}

.pf-fp-7 {
    bottom: 130px;
    right: 12px;
    transform: rotate(10deg);
}

/* --- FAQ (よくある質問) セクション --- */
.faq-section {
    background-color: #ea6182;
    /* ピンク背景 */
    padding: 0 0 60px 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 上部の波線境界 */
.faq-top-wave {
    position: absolute;
    top: -77px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 5;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ea6182' d='M0,0 L430,0 L430,50 C322.5,5 107.5,95 0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 430px 80px;
    background-position: 0 0;
    pointer-events: none;
    transform: scaleY(-1);
    animation: wave-horizontal-flow 4s linear infinite;
}

.faq-top-wave svg {
    display: none;
}

/* よくある質問見出し (袋文字風) */
.faq-title {
    /* font-family: 'Zen Kaku Gothic New', sans-serif; */
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #231815;
    /* 黒ふち枠 */
    margin: 0 auto 30px auto;
    letter-spacing: 0.05em;
    z-index: 3;
    display: block;
}

/* リストレイアウト */
.faq-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* 各質問アイテム (白いカード) */
.faq-item {
    width: 85%;
    background-color: #ffffff;
    border: 2.5px solid #231815;
    /* 黒太ふち */
    border-radius: 12px;
    box-shadow: 3.5px 3.5px 0px #231815;
    /* 黒影 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 2;
    transition: box-shadow 0.2s ease;
}

/* 質問エリア */
.faq-question {
    display: flex;
    align-items: center;
    padding: 15px 18px;
    cursor: pointer;
    position: relative;
    gap: 12px;
    user-select: none;
}

.faq-num {
    /* font-family: 'Zen Kaku Gothic New', sans-serif; */
    font-size: 1.45rem;
    font-weight: 900;
    color: #ea6182;
    /* ピンクのQ1〜10 */
    flex-shrink: 0;
    line-height: 1;
}

.faq-qtext {
    font-size: 0.95rem;
    font-weight: 800;
    color: #231815;
    line-height: 1.45;
    text-align: left;
    padding-right: 35px;
    /* ボタンとの衝突防止 */
}

/* プラス・マイナス開閉トグルボタン */
.faq-toggle-btn {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background-color: #231815;
    /* デフォルト黒丸 */
    color: #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
    pointer-events: none;
    /* 親のクリックを優先 */
}

.faq-toggle-btn::before,
.faq-toggle-btn::after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 横棒 */
.faq-toggle-btn::before {
    width: 12px;
    height: 2.5px;
    top: calc(50% - 1.25px);
    left: calc(50% - 6px);
}

/* 縦棒 (閉じた状態のみ表示しプラスにする) */
.faq-toggle-btn::after {
    width: 2.5px;
    height: 12px;
    top: calc(50% - 6px);
    left: calc(50% - 1.25px);
}

/* アクティブ状態 (回答展開時) */
.faq-item.active .faq-toggle-btn {
    background-color: #ea6182;
    /* ピンク丸 */
}

.faq-item.active .faq-toggle-btn::after {
    transform: rotate(90deg);
    opacity: 0;
    /* 縦棒を消してマイナスにする */
}

/* アコーディオン回答領域 */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background-color: #ffffff;
}

.faq-answer-inner {
    padding: 0 18px 18px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #555;
    line-height: 1.7;
    text-align: left;
}

/* 波括弧型メッセージコンテナ（相対配置の基準にする） */
.faq-balloon-container {
    position: relative; /* 画像を絶対配置するための基準 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px; /* 引き上げ（75px -> 30px） */
    width: 100%;
    box-sizing: border-box;
}

/* ふわふわ画像装飾 (左右の波括弧) */
.huwahuwa-img {
    height: 92px; /* 指定の大きさ（高さを92pxに固定） */
    width: auto; /* 横幅はアスペクト比を維持 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 縦中央揃え */
    flex-shrink: 0;
    pointer-events: none;
}

.huwahuwa-left {
    left: 8px; /* 画面端から少し内側へ寄せて見切れを防止 */
}

.huwahuwa-right {
    right: 8px; /* 画面端から少し内側へ寄せて見切れを防止 */
}

.faq-bubble {
    position: relative;
    top: 14px; /* もう少し下へ移動（6px -> 14px） */
    width: 100%;
    padding: 5px 38px; /* 左右の画像とテキストが重ならないように内側へ余白を確保 */
    text-align: center;
    color: #ffffff;
    box-sizing: border-box;
    font-size: 0.95rem; /* スマホ幅の余白内に収まるように微調整 */
    font-weight: 700;
    line-height: 1.8;
    white-space: nowrap; /* 途中で改行させない */
}

.faq-bubble p {
    margin: 0;
}

/* お問い合わせボタン ＆ キャラクター */
.faq-contact-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 55px; /* テキストと重ならないように間隔を広げる（30px -> 55px） */
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
}

.contact-char-head {
    position: absolute;
    top: -46px; /* ボタン拡大に合わせて上に調整（-38px -> -46px） */
    left: calc(50% - 105px); /* ボタン拡大に合わせて左に調整（-90px -> -105px） */
    width: 52px; /* キャラクターもひと回り大きく（42px -> 52px） */
    height: auto;
    z-index: 1;
    animation: peek-a-boo 4.5s ease-in-out infinite; /* ぴょこぴょこループアニメーション */
    transform-origin: bottom center;
}

/* お問い合わせキャラクターのぴょこぴょこアニメーション */
@keyframes peek-a-boo {
    0%, 100% {
        transform: translateY(0); /* 最高点（一番出ている状態） */
    }
    45%, 55% {
        transform: translateY(32px); /* 最低点（ボタンの裏にほぼ隠れる状態） */
    }
}

.contact-btn {
    display: flex;
    align-items: center;
    border: 3px solid #231815; /* 枠線を少し太く（2.5px -> 3px） */
    border-radius: 50px;
    background-color: #ffffff;
    text-decoration: none;
    padding-left: 28px; /* 内側余白を増やす（22px -> 28px） */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 4.5px 4.5px 0px #231815; /* 影を大きく（3.5px -> 4.5px） */
    z-index: 2;
}

.contact-btn:hover {
    transform: scale(1.03);
}

.contact-btn-text {
    font-size: 1.15rem; /* 文字サイズを大きく（0.95rem -> 1.15rem） */
    font-weight: 900;
    color: #231815;
    margin-right: 15px;
    letter-spacing: 0.03em;
}

.contact-btn-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #231815;
    /* 黒背景丸 */
    color: #ffffff;
    width: 34px; /* 矢印丸のサイズを拡大（28px -> 34px） */
    height: 34px;
    border-radius: 50%;
    margin: 4px; /* 余白調整（3px -> 4px） */
    font-weight: bold;
    font-size: 1.15rem; /* 矢印文字を大きく（0.95rem -> 1.15rem） */
}

/* 底辺 of 波線境界 */
.faq-bottom-wave {
    position: absolute;
    bottom: -79px; /* 下のRecruitセクションに食い込ませる（-1px -> -79px） */
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 5;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ea6182' d='M0,0 L430,0 L430,50 C322.5,5 107.5,95 0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 430px 80px;
    background-position: 0 0;
    pointer-events: none;
    animation: wave-horizontal-flow 4s linear infinite;
}

.faq-bottom-wave svg {
    display: none;
}

/* 最下部縦ドット点線 */
.faq-footer-dots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    color: #ffffff;
}

.faq-footer-dots span {
    display: inline-block;
    font-size: 2.2rem; /* ドットのサイズを大きく（1.1rem -> 2.2rem） */
    line-height: 0.3;
    opacity: 0; /* 初期は非表示 */
    animation: dot-flow 2.8s infinite both;
}

/* 各ドットの出現タイミングを上から順にずらす（0.15秒ステップ） */
.faq-footer-dots span:nth-child(1) { animation-delay: 0.1s; }
.faq-footer-dots span:nth-child(2) { animation-delay: 0.25s; }
.faq-footer-dots span:nth-child(3) { animation-delay: 0.4s; }
.faq-footer-dots span:nth-child(4) { animation-delay: 0.55s; }
.faq-footer-dots span:nth-child(5) { animation-delay: 0.7s; }
.faq-footer-dots span:nth-child(6) { animation-delay: 0.85s; }
.faq-footer-dots span:nth-child(7) { animation-delay: 1.0s; }

/* 上から順にドットがたまっていき、最後は一斉に消えてリピートするキーフレーム */
@keyframes dot-flow {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    15%, 80% {
        opacity: 1;
        transform: scale(1.1);
    }
    90%, 100% {
        opacity: 0;
        transform: scale(0.4);
    }
}

/* --- Recruit (採用情報) セクション --- */
.recruit-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
    background-color: #ffffff;
}

/* 方眼グリッド紙背景エリア */
.recruit-grid-area {
    background-color: #ffffff;
    background-image:
        linear-gradient(to right, #fcdde4 1.2px, transparent 1.2px),
        linear-gradient(to bottom, #fcdde4 1.2px, transparent 1.2px);
    background-size: 20px 20px;
    /* 20pxの方眼 */
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* 「Recruit」見出し (手書き風演出付き袋文字＋完全中央配置) */
.pencil-write-container {
    width: 100%;
    text-align: center;
    margin: 0 auto 15px auto;
    z-index: 3;
    display: flex;
    justify-content: center;
}

.pencil-write-container .recruit-title {
    /* font-family: 'Zen Kaku Gothic New', sans-serif; */
    font-size: 2.6rem;
    font-weight: 900;
    text-align: center;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #231815;
    /* 黒枠フチ */
    margin: 0 auto;
    letter-spacing: 0.05em;
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

/* スクロールで到達した際の発動クラス */
.pencil-write-container.pencil-write-active .recruit-title {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* サブ見出し */
.recruit-subtitle-wrapper {
    margin-bottom: 25px;
    z-index: 2;
}

.recruit-subtitle {
    font-size: 1.05rem;
    font-weight: 800;
    color: #231815;
    position: relative;
    padding: 4px 15px; /* マーカー背景の内側余白 */
    display: inline-block;
    background-color: #fcdde4; /* 薄ピンクベタマーカー背景に変更 */
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, opacity 0.2s ease 0.35s;
}

/* スクロールで到達した際の発動クラス */
.pencil-write-container.pencil-write-active ~ .recruit-subtitle-wrapper .recruit-subtitle,
.recruit-subtitle-wrapper.pencil-write-active .recruit-subtitle {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* リクルート画像ボックス (写真の形に黒枠がピッタリ密着フィット) */
.recruit-image-placeholder {
    border: 2.5px solid #231815;
    width: 82%;
    height: auto;
    margin: 0 auto 35px auto;
    box-sizing: border-box;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-100px) scaleX(0.6);
    transform-origin: left center;
}

.recruit-image-placeholder .recruit-img-content {
    width: 100%;
    height: auto;
    display: block;
}

/* スクロール視界に入った際、横からスライド登場 */
.recruit-section.recruit-img-active .recruit-image-placeholder {
    animation: myonSlideLeft 0.95s cubic-bezier(0.25, 1, 0.5, 1) 0.2s forwards;
}

/* メッセージブロック */
.recruit-msg-block {
    position: relative;
    width: 82%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0 auto;
}

/* リード文 */
.recruit-lead-msg {
    text-align: center;
    color: #231815;
    font-size: 1.05rem; /* サイズを大きく（0.95rem -> 1.05rem） */
    font-weight: 800;
    line-height: 2.15;
    letter-spacing: 0.02em;
    z-index: 2;
    padding: 0; /* 左余白を削除し、完全に中央寄せ */
}

.recruit-lead-msg p {
    margin: 0 0 10px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* スクロールで視界に入った際、各行が1行ずつ順々にゆっくりふわっと浮かび上がる演出 */
.recruit-section.recruit-img-active .recruit-lead-msg p {
    opacity: 1;
    transform: translateY(0);
}

.recruit-section.recruit-img-active .recruit-lead-msg p:nth-child(1) { transition-delay: 0.2s; }
.recruit-section.recruit-img-active .recruit-lead-msg p:nth-child(2) { transition-delay: 0.45s; }
.recruit-section.recruit-img-active .recruit-lead-msg p:nth-child(3) { transition-delay: 0.7s; }
.recruit-section.recruit-img-active .recruit-lead-msg p:nth-child(4) { transition-delay: 0.95s; }
.recruit-section.recruit-img-active .recruit-lead-msg p:nth-child(5) { transition-delay: 1.2s; }
.recruit-section.recruit-img-active .recruit-lead-msg p:nth-child(6) { transition-delay: 1.45s; }

.highlight-pink {
    color: #ea6182;
    font-size: 1.25rem; /* 連動して大きく（1.15rem -> 1.25rem） */
    font-weight: 900;
}

.symbol-pink {
    color: #ea6182;
    font-size: 1.45rem; /* 連動して大きく（1.35rem -> 1.45rem） */
    font-weight: 900;
    -webkit-text-stroke: 0.5px #ea6182;
}

/* 手書きアウトライン風デコ記号 */
.outline-deco {
    position: absolute;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: 1.5px #ea6182;
    /* ピンクフチ */
    pointer-events: none;
    opacity: 0.75;
    z-index: 1;
}

.deco-excl {
    top: -35px; /* 右上の位置へ微調整 */
    right: 5px; /* さらに右へ移動（15px -> 5px） */
    font-size: 4.2rem; /* サイズ拡大（2.3rem -> 4.2rem） */
    transform: rotate(15deg);
}

.deco-question {
    top: 30px;
    right: 25px; /* メッセージ「もっている」のすぐ右横へ */
    font-size: 4.0rem; /* サイズ拡大（2.2rem -> 4.0rem） */
    transform: rotate(-10deg);
}

.deco-heart {
    bottom: 45px;
    left: -5px; /* サイズ拡大に合わせて微調整 */
    font-size: 2.8rem; /* サイズを拡大（1.7rem -> 2.8rem） */
    transform: rotate(-15deg);
}

/* スマホ枠外はみ出し用 リクルート共通装飾バッジ */
.recruit-deco-badge {
    position: absolute;
    z-index: 25;
    pointer-events: none;
    opacity: 0; /* 初期表示でのチラつき防止 */
}

/* 左端「笑顔」の縦書き袋文字 (枠内見切れ配置) */
.smile-outline-text {
    writing-mode: vertical-rl;
    font-size: 6.2rem; /* 巨大化（スクショに合わせる） */
    font-weight: 900;
    -webkit-text-stroke: 1.5px #ea6182; /* ピンクの細いフチ線 */
    color: transparent;
    position: absolute;
    left: -48px; /* スマホ左端からはみ出させて見切れさせる */
    top: -20px; /* 縦位置調整 */
    z-index: 1; /* メッセージの下に重ねる */
    letter-spacing: 0.05em;
    line-height: 0.9;
    opacity: 0.55; /* スクショに合わせて程よくくっきり見せる */
    pointer-events: none;
}

/* 右側のキラキラ星バッジ */
.star-right-badge {
    width: 75px; /* サイズを大幅に拡大（32px -> 75px） */
    height: 75px; /* サイズを大幅に拡大（32px -> 75px） */
    background-image: url("../image/kirakira-purple.png"); /* 実画像に差し替え */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    right: -13px; /* はみ出し位置を調整（-16px -> -13px） */
    filter: drop-shadow(2px 2px 0px #231815);
}

/* 左下のキラキラ星バッジ (大小セット・スマホ枠外はみ出し) */
.star-left-badge {
    position: absolute;
    left: -28px; /* さらに右へ移動（-38px -> -28px） */
    width: 80px; /* 大小が収まるサイズ */
    height: 92px;
    z-index: 25; /* 枠外装飾と重ね順を統一 */
}

.star-left-badge .star-large {
    width: 58px;
    height: 58px;
    background-image: url("../image/kirakira-purple.png"); /* 実画像に差し替え */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 0; /* 右上配置 */
    top: 0;
    filter: drop-shadow(2px 2px 0px #231815);
}

.star-left-badge .star-small {
    width: 34px;
    height: 34px;
    background-image: url("../image/kirakira-purple.png"); /* 実画像に差し替え */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0; /* 左下配置（大星の左下に重なる） */
    bottom: 0;
    filter: drop-shadow(1.5px 1.5px 0px #231815);
}

/* ベタ塗り薄ピンクエリア */
.recruit-pink-area {
    background-color: #fcdde4;
    /* 薄ピンクベタ */
    padding: 40px 0 75px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.recruit-callout {
    font-size: 1.05rem; /* サイズ拡大（0.92rem -> 1.05rem） */
    font-weight: 800;
    color: #231815;
    line-height: 1.95; /* 行間微調整 */
    text-align: center;
    margin: 0 0 25px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.1s ease-out, transform 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 独立スクロール監視で画面に入った際、ゆっくり「ふわっ」と上品に登場 */
.recruit-callout.callout-active {
    opacity: 1;
    transform: translateY(0);
}

/* 詳しくはこちらボタン (黒太枠白カプセル型) */
.recruit-btn-container {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 2;
}

.recruit-more-btn {
    display: flex;
    align-items: center;
    border: 2.5px solid #231815;
    /* 黒枠 */
    border-radius: 50px;
    background-color: #ffffff;
    text-decoration: none;
    padding-left: 30px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 3.5px 3.5px 0px #231815;
    /* 黒影 */
}

.recruit-more-btn:hover {
    transform: scale(1.03);
}

.recruit-btn-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: #231815;
    margin-right: 18px;
    letter-spacing: 0.05em;
}

.recruit-btn-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #231815;
    /* 黒丸背景 */
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 3px;
    font-weight: bold;
    font-size: 0.95rem;
}

/* --- Access (アクセス) セクション --- */
.access-section {
    background-color: #ea6182;
    /* ピンク背景 */
    padding: 0 0 45px 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 上部の波線境界 (ヘッダー同様 of 流れる波線仕様に変更) */
.access-top-wave {
    position: absolute;
    top: -79px; /* 隙間を無くして薄ピンク底辺にピタッと合わせる高さ */
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 5;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ea6182' d='M0,0 L430,0 L430,50 C322.5,5 107.5,95 0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 430px 80px;
    background-position: 0 0;
    pointer-events: none;
    transform: scaleY(-1); /* 波を反転させて薄ピンクと美しく接続 */
    animation: wave-horizontal-flow 4s linear infinite;
}

.access-top-wave svg {
    display: none; /* インラインSVGは非表示にします */
}

/* アクセスタイトル (袋文字風) */
.access-title {
    /* font-family: 'Zen Kaku Gothic New', sans-serif; */
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #231815;
    /* 黒ふち枠 */
    margin: 0 auto 25px auto;
    letter-spacing: 0.05em;
    z-index: 3;
    display: block;
}

/* マップコンテナ (黒枠＋角丸) */
.access-map-container {
    width: 82%;
    height: 380px;
    border-radius: 18px;
    border: 2.5px solid #231815;
    /* 黒枠 */
    overflow: hidden;
    margin: 0 auto 22px auto;
    z-index: 2;
    position: relative;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.08);
}

/* Googleマップ iframe (モノクログレースケールフィルター適用) */
.access-map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(100%) contrast(1.12);
    /* モノクロ化 */
}

/* アクセス情報案内 */
.access-info {
    width: 82%;
    color: #ffffff;
    /* 白文字 */
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.95;
    text-align: left;
    margin: 0 auto 35px auto;
    letter-spacing: 0.02em;
}

.access-info p {
    margin: 0 0 8px 0;
}

/* 最下部 ACCESS 装飾帯 (三重線＋白帯ピンク文字) */
.access-band-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
}

.access-band-line-outer {
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    margin: 1.5px 0;
}

.access-band-line-inner {
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    margin: 1.5px 0;
}

.access-band-content {
    background-color: #ffffff;
    /* 白背景 */
    width: 100%;
    overflow: hidden;
    /* はみ出した文字を隠す */
    padding: 6px 0;
    box-sizing: border-box;
}

.access-ticker-inner {
    display: flex;
    white-space: nowrap;
    width: max-content;
    animation: access-ticker-anim 12s linear infinite;
    /* 右から左へ無限ループ */
}

.access-ticker-inner span {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 900;
    color: #ea6182;
    /* ピンク文字 */
    letter-spacing: 0.12em;
}

@keyframes access-ticker-anim {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
        /* 半分進んだら先頭に戻ることでループさせる */
    }
}

/* --- Company Profile (会社概要) セクション --- */
.company-section {
    background-color: #ffffff;
    /* 白背景 */
    padding: 50px 0 0 0;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* 会社概要カード */
.company-card {
    width: 82%;
    background-color: #ffffff;
    border: 2.5px solid #ea6182;
    /* ピンク枠線 */
    border-radius: 18px;
    padding: 25px 20px;
    box-sizing: border-box;
    margin: 0 auto 35px auto;
    z-index: 2;
    position: relative;
}

.profile-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-list li {
    display: flex;
    flex-direction: column;
}

/* 各項目の見出しラベル */
.profile-label {
    font-size: 0.98rem;
    font-weight: 800;
    color: #231815;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 先頭の黒い正方形マーク */
.bullet-square {
    font-size: 0.72rem;
    color: #231815;
    display: inline-block;
}

/* 値テキスト */
.profile-val {
    font-size: 0.88rem;
    font-weight: 600;
    color: #333333;
    margin: 0 0 20px 0;
    line-height: 1.6;
    padding-left: 15px;
    /* インデント */
    text-align: left;
}

.profile-list li:last-child .profile-val {
    margin-bottom: 0;
    /* 最後の項目の下部マージンを排除 */
}

/* 最下部3色なみなみ波線 */
.company-bottom-waves {
    width: 100%;
    height: 224px; /* 上下のセーフエリア確保のため200pxから224pxに拡張 */
    margin-top: 10px;
    display: block;
    position: relative;
    overflow: hidden;
    padding: 12px 0; /* 上下に12pxずつのホバー拡大用セーフエリアを設定 */
}

.company-bottom-waves .wave-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 80px; /* 波の太さは80pxを維持 */
    background-repeat: repeat-x;
    background-size: 430px 80px;
    animation: wave-horizontal-flow 4s linear infinite;
    cursor: pointer;
    transition: transform 0.2s ease, z-index 0.2s ease; /* ホバー時の重ね順遷移もスムーズに */
}

/* ホバー時に少し強調する演出（見切れないように拡大率を1.08に維持） */
.company-bottom-waves .wave-line:hover {
    transform: scaleY(1.08);
    z-index: 10; /* ホバーした波を一番手前に持ってきて重なりを美しく見せる */
}

.company-bottom-waves .wave-pink {
    top: 12px; /* 上端から12pxのセーフエリアを開けて配置 */
    z-index: 3;
    background-image: url("../image/nami-pink.png");
}

.company-bottom-waves .wave-blue {
    top: 52px; /* 40px + 12px (セーフエリア) */
    z-index: 2;
    background-image: url("../image/nami-blue.png");
}

.company-bottom-waves .wave-yellow {
    top: 92px; /* 80px + 12px (セーフエリア) */
    z-index: 1;
    background-image: url("../image/nami-yellow.png");
}

/* --- フッター (page-footer) セクション --- */
.page-footer {
    background-color: #ea6182;
    /* ピンク背景 */
    padding: 45px 25px 35px 25px;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    z-index: 2;
    border-radius: 0 0 33px 33px;
    /* スマホ画面の底丸インナーに完全に沿わせる */
}

/* フッター天面のなみなみ波型装飾 (ヘッダーの波型と完全統一デザイン) */
.page-footer::before {
    content: "";
    position: absolute;
    top: -77px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 100' preserveAspectRatio='none'%3E%3Cpath fill='%23ea6182' d='M0,100 L430,100 L430,50 C322.5,95 107.5,5 0,50 Z'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 430px 80px;
    background-position: 0 0;
    pointer-events: none;
    z-index: 10;
    animation: wave-horizontal-flow 4s linear infinite;
}

/* 走るキャラクターリンク */
.dept-footer-character-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.dept-footer-character-link:hover {
    transform: scale(1.06);
}

/* フッター立体扉キャラクターリンク */
.footer-door-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    z-index: 15;
}

/* 住所ブロック */
.footer-addresses {
    text-align: left;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.addr-block h5 {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 5px 0;
    letter-spacing: 0.02em;
}

.addr-block p {
    font-size: 0.78rem;
    font-weight: 600;
    margin: 0 0 2px 0;
    opacity: 0.95;
}

/* 白色の細い水平線 */
.footer-divider {
    border: none;
    border-top: 1.5px solid #ffffff;
    margin: 0 0 25px 0;
    width: 100%;
    opacity: 0.8;
}

/* メニューリンク */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    text-align: left;
}

.footer-links li {
    margin-bottom: 9px;
}

.footer-links a {
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: underline;
    transition: opacity 0.15s ease;
}

.footer-links a:hover {
    opacity: 0.85;
}

/* 右下の立体扉ひょっこりキャラクター (ura と omote の間に bisuke-door を挟み込み) */
.footer-door-container {
    position: absolute;
    right: 20px;
    bottom: 50px;
    height: 120px;
    width: auto;
    z-index: 3;
    cursor: pointer;
}

/* 裏画像 (最背面 z-index: 1 - ベストポジション固定) */
.footer-door-container .door-ura-img {
    height: 100%;
    width: auto;
    display: block;
    z-index: 1;
}

/* 2. 中間 (z-index: 2): bisuke-door.png (少し左へ移動アジャスト) */
.footer-door-container .bisuke-door-bg {
    position: absolute;
    bottom: -16px;
    left: -28px;
    width: 145%;
    height: 145%;
    object-fit: contain;
    display: block;
    z-index: 2;
    pointer-events: none;
}

/* 表画像 (最前面 z-index: 3 - ベストポジション完全固定) */
.footer-door-container .door-omote-img {
    position: absolute;
    bottom: -14px;
    right: 0px;
    height: 124%;
    width: auto;
    z-index: 3;
    display: block;
    transform-origin: right center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* マウスホバーで表扉が開閉して可愛い動き */
.footer-door-container:hover .door-omote-img {
    transform: rotateY(-18deg) scaleX(0.92);
}

/* 左下白抜き丸型SNSアイコン */
.footer-sns-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    z-index: 2;
    position: relative;
}

.footer-sns-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    /* 白背景 */
    color: #ea6182;
    /* ピンクアイコン */
    text-decoration: none;
    transition: transform 0.15s ease;
    box-shadow: 1px 1.5px 3px rgba(0, 0, 0, 0.1);
}

.footer-sns-icon svg {
    width: 22px;
    height: 22px;
}

.footer-sns-icon:hover {
    transform: scale(1.05);
}

/* 著作権表記 (フッター最下部へ移動) */
.footer-copyright {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin: 0;
    opacity: 0.95;
    letter-spacing: 0.05em;
    z-index: 2;
}

/* --- 縦方向のレスポンシブ設計 (画面高さが低い時の重なり防止) --- */
@media (max-height: 850px) {
    .left-panel-header {
        top: 20px;
    }

    .left-panel-center {
        gap: 15px;
        /* バッジとSNSの間隔を縮める */
    }

    .recruit-badge-wrapper {
        width: 240px;
        /* バッジを240pxに縮小 */
        height: 240px;
    }

    .character-head-dummy {
        width: 90px;
        height: 90px;
        top: -25px;
        left: -15px;
        font-size: 0.7rem;
    }

    .badge-title {
        font-size: 1.85rem;
    }

    .badge-sub {
        font-size: 1.05rem;
    }

    .badge-content .arrow {
        margin-top: 8px;
        width: 65px;
        height: 32px;
    }

    .check-sns {
        width: 250px;
        /* SNSエリアを縮小 */
        gap: 10px;
    }

    .check-title {
        font-size: 1.15rem;
    }

    .sns-button {
        padding: 10px 22px;
        font-size: 1.05rem;
    }

    .sns-button .arrow-diagonal {
        font-size: 1.15rem;
    }

    .dummy-banners-area {
        bottom: 20px;
        /* フッター位置を上げる */
        gap: 6px;
    }

    .dummy-banner-box {
        height: 38px;
        font-size: 0.75rem;
    }

    .footprints-container {
        left: 200px;
        top: 130px;
    }
}

/* 背景ドットが斜め左上に流れるアニメーション */
@keyframes dot-bg-flow {
    0% {
        background-position: 0 0, 100px 100px;
    }

    100% {
        background-position: -200px -200px, -100px -100px;
    }
}

/* --- スマホ外枠 of 左右に飛び出すキャラクターのスタイル --- */
.popout-char {
    position: absolute;
    z-index: 25;
    /* スマホ（z-index: 20）より手前に重ねて、枠線の上にぴょこっと乗せます */
    pointer-events: none;
    /* 操作を妨げない */
    opacity: 0;
    /* 飛び出し時も引っ込み時も「ぴょんっ！」と軽快に跳ねるバウンスイージング */
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.popout-char img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: bottom center;
    animation: sway 3s ease-in-out infinite alternate;
    will-change: transform;
}

/* ゆらゆら揺れるアニメーション */
@keyframes sway {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

/* 各キャラクターで揺れのタイミングと速度を少しずらす */
.char-left-1 img { animation-duration: 3.2s; animation-delay: 0s; }
.char-left-2 img { animation-duration: 2.8s; animation-delay: -1s; }
.char-right-1 img { animation-duration: 3.5s; animation-delay: -0.5s; }
.char-right-2 img { animation-duration: 3.1s; animation-delay: -1.5s; }

/* 左キャラクター1 (aboutus_character1.png) */
.char-left-1 {
    width: 123px;
    left: -47px;
    top: 188px;
    transform: translateX(45px) scale(0.4) rotate(-15deg);
    transition-delay: 0.0s;
}

.char-left-1.active {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(-8deg);
}

/* 左キャラクター2 (aboutus_character3.png - ※左右入替済み) */
.char-left-2 {
    width: 119px;
    left: -52px;
    top: 450px;
    transform: translateX(45px) scale(0.4) rotate(0deg);
    transition-delay: 0.25s;
}

.char-left-2.active {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(6deg);
}

/* 右キャラクター1 (aboutus_character2.png - ※左右入替済み) */
.char-right-1 {
    width: 116px;
    right: -47px;
    top: 330px;
    transform: translateX(-45px) scale(0.4) rotate(15deg);
    transition-delay: 0.12s;
}

.char-right-1.active {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(8deg);
}

/* 右キャラクター2 (aboutus_character4.png) */
.char-right-2 {
    width: 117px;
    right: -49px;
    top: 586px;
    transform: translateX(-35px) scale(0.4) rotate(-12deg);
    transition-delay: 0.38s;
}

.char-right-2.active {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(-6deg);
}

/* 横幅の狭いレスポンシブ（タブレット・スマホ表示時）は飛び出しキャラを非表示にしてスクロールバー発生を防ぐ */
@media (max-width: 1450px) {
    .popout-char {
        display: none;
    }
}

/* 制作実績 拡大モーダル (Lightbox) */
.portfolio-modal {
    display: none; /* 初期は非表示 */
    position: fixed;
    z-index: 10000; /* 最前面 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(35, 24, 21, 0.85); /* 濃いココアブラウン半透明 */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-modal.active {
    display: flex;
    opacity: 1;
}

/* びょんと弾む拡大画像 */
.portfolio-modal-img {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
    border: 3.5px solid #231815;
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    background-color: #ffffff;
    box-sizing: border-box;
    
    /* ポップアップアニメーション */
    transform: scale(0.65);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); /* Backイージングでぷるんと弾む */
}

.portfolio-modal.active .portfolio-modal-img {
    transform: scale(1);
}

/* 閉じる（×）ボタン */
.portfolio-modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
    color: #ffffff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
    user-select: none;
    line-height: 1;
    z-index: 10001;
}

.portfolio-modal-close:hover {
    transform: scale(1.15);
    color: #ea6182; /* 濃いピンク */
}

/* スライダー内の画像をポインターに変更 */
.portfolio-slide .slide-img {
    cursor: zoom-in;
}

/* ==========================================================================
   カラーテーマ機能 (色のみの上書き)
   ========================================================================== */

/* --- ブルーテーマ --- */
body.theme-blue {
    background-color: #f0f7fa; /* サイト全体の背景を淡いブルーに */
}

/* 1. PC側パネル装飾の色 */
body.theme-blue .sns-button.instagram {
    background-color: #009dda;
}
body.theme-blue .dummy-banner-box {
    background-color: #e6f5fc;
    color: #009dda;
    border-color: #009dda;
}

/* 2. スマホ内コンテンツの色 */
body.theme-blue .phone-header {
    background-color: #009dda;
}
body.theme-blue .phone-nav-btn {
    color: #009dda;
}
body.theme-blue .nav-menu-btn span {
    background-color: #009dda;
}
body.theme-blue .section-title {
    color: #009dda;
}
body.theme-blue .news-list li {
    border-bottom-color: #009dda;
}
body.theme-blue .news-date {
    color: #009dda;
}
body.theme-blue .news-category {
    background-color: #009dda;
}
body.theme-blue .dept-badge {
    background-color: #009dda;
}
body.theme-blue .dept-card {
    border-color: #009dda;
}
body.theme-blue .dept-card-title {
    color: #009dda;
}
body.theme-blue .dept-card-btn {
    background-color: #009dda;
}
body.theme-blue .portfolio-card {
    background-color: #dceffd; /* 薄い青 */
}
body.theme-blue .portfolio-client,
body.theme-blue .portfolio-work,
body.theme-blue .slider-arrow {
    color: #0078a8; /* 濃い青 */
}
body.theme-blue .seekbar-track {
    background-color: #dceffd;
}
body.theme-blue .faq-q {
    background-color: #009dda;
}
body.theme-blue .faq-a {
    border-color: #009dda;
}
body.theme-blue .faq-a::before {
    color: #009dda;
}
body.theme-blue .access-btn {
    background-color: #009dda;
}
body.theme-blue .portfolio-modal-close:hover {
    color: #009dda;
}
body.theme-blue .contact-button {
    background-color: #009dda;
}

/* 3. 画像アセットの色相回転 (ピンクからブルーへ) */
body.theme-blue .recruit-badge,
body.theme-blue .sticker-img,
body.theme-blue .cloud-badge {
    filter: hue-rotate(210deg);
}


/* --- イエローテーマ --- */
body.theme-yellow {
    background-color: #fefcf3; /* サイト全体の背景を淡いイエローに */
}

/* 1. PC側パネル装飾の色 */
body.theme-yellow .sns-button.instagram {
    background-color: #fcc800;
}
body.theme-yellow .dummy-banner-box {
    background-color: #fffadd;
    color: #c69200;
    border-color: #fcc800;
}

/* 2. スマホ内コンテンツの色 */
body.theme-yellow .phone-header {
    background-color: #fcc800;
}
body.theme-yellow .phone-nav-btn {
    color: #c69200;
}
body.theme-yellow .nav-menu-btn span {
    background-color: #fcc800;
}
body.theme-yellow .section-title {
    color: #c69200;
}
body.theme-yellow .news-list li {
    border-bottom-color: #fcc800;
}
body.theme-yellow .news-date {
    color: #c69200;
}
body.theme-yellow .news-category {
    background-color: #fcc800;
}
body.theme-yellow .dept-badge {
    background-color: #fcc800;
}
body.theme-yellow .dept-card {
    border-color: #fcc800;
}
body.theme-yellow .dept-card-title {
    color: #c69200;
}
body.theme-yellow .dept-card-btn {
    background-color: #fcc800;
}
body.theme-yellow .portfolio-card {
    background-color: #fff8db; /* 薄い黄 */
}
body.theme-yellow .portfolio-client,
body.theme-yellow .portfolio-work,
body.theme-yellow .slider-arrow {
    color: #c69200; /* 濃い黄 */
}
body.theme-yellow .seekbar-track {
    background-color: #fff8db;
}
body.theme-yellow .faq-q {
    background-color: #fcc800;
}
body.theme-yellow .faq-a {
    border-color: #fcc800;
}
body.theme-yellow .faq-a::before {
    color: #c69200;
}
body.theme-yellow .access-btn {
    background-color: #fcc800;
}
body.theme-yellow .portfolio-modal-close:hover {
    color: #fcc800;
}
body.theme-yellow .contact-button {
    background-color: #fcc800;
}

/* 3. 画像アセットの色相回転 (ピンクからイエローへ) */
body.theme-yellow .recruit-badge,
body.theme-yellow .sticker-img,
body.theme-yellow .cloud-badge {
    filter: hue-rotate(60deg);
}

/* ==========================================================================
   Recruit 採用情報ページ専用スタイル（画像通りのビジュアル再現）
   ========================================================================== */
.recruit-main-section {
    padding: 50px 0 20px 0;
    text-align: center;
    background-color: #ffffff;
}

.recruit-page-title {
    font-size: 2.6rem;
    font-weight: 900;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #231815;
    margin: 0 auto 5px auto;
    letter-spacing: 0.05em;
    text-align: center;
}

.recruit-page-subtitle {
    font-size: 0.9rem;
    font-weight: 800;
    color: #231815;
    background-color: #fcdde4;
    padding: 4px 15px;
    display: inline-block;
    border-radius: 4px;
    margin: 0 auto;
}

.recruit-detail-section {
    background-color: #ffffff;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.recruit-sub-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #231815;
    margin: 0 auto 20px auto;
    text-align: center;
    width: 100%;
}

/* 募集要項太枠角丸カード */
.recruit-tab-card {
    width: 82%;
    background-color: #fcdde4; /* 薄ピンク背景 */
    border: 2.5px solid #231815;
    border-radius: 18px;
    box-shadow: 6px 6px 0px #231815;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

.recruit-card-header {
    background-color: #ea6182;
    border: 2.5px solid #231815;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    margin-bottom: 15px;
    box-shadow: 2px 2px 0px #231815;
}

.recruit-job-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #ffffff;
}

.recruit-card-content {
    background-color: #ffffff;
    border: 2.5px solid #231815;
    border-radius: 12px;
    padding: 18px 16px;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.recruit-info-item {
    display: none;
}

.recruit-info-item.active {
    display: block;
}

.recruit-card-divider {
    border: none;
    border-top: 2.5px dashed #ea6182;
    margin: 12px 0 16px 0;
}

.info-label {
    font-size: 0.88rem;
    font-weight: 900;
    color: #231815;
    margin: 0 0 5px 0;
    text-align: left;
}

.info-val {
    font-size: 0.82rem;
    font-weight: 600;
    color: #333333;
    margin: 0 0 16px 0;
    line-height: 1.55;
    text-align: left;
}

.info-val:last-child {
    margin-bottom: 0;
}

/* 丸型タブボタン（シャドウ付き） */
.recruit-card-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.tab-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2.5px solid #231815;
    background-color: #ffffff;
    font-size: 0.95rem;
    font-weight: 900;
    color: #231815;
    cursor: pointer;
    box-shadow: 2.5px 2.5px 0px #231815;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background-color 0.15s ease;
    outline: none;
}

.tab-dot:hover {
    transform: translateY(-2px);
}

.tab-dot:active {
    transform: translateY(0);
}

.tab-dot.active {
    background-color: #ea6182;
    color: #ffffff;
}

/* 選考フロー */
.recruit-flow-section {
    background-color: #ffffff;
    padding: 35px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.flow-container {
    width: 82%;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.flow-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flow-detail-list li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.flow-badge {
    font-size: 1.15rem;
    font-weight: 900;
    color: #ea6182;
    line-height: 1.2;
    flex-shrink: 0;
}

.flow-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.flow-content strong {
    font-size: 0.95rem;
    font-weight: 900;
    color: #231815;
    margin-bottom: 4px;
}

.flow-content p {
    font-size: 0.78rem;
    font-weight: 600;
    color: #555555;
    margin: 0;
    line-height: 1.5;
}

/* お問い合わせ先の黒ボード（白枠＆黒背景） */
.recruit-contact-board {
    background-color: #231815;
    color: #ffffff;
    border: 2.5px solid #231815;
    border-radius: 14px;
    padding: 16px 18px;
    text-align: left;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.15);
    margin-top: 10px;
    box-sizing: border-box;
}

.recruit-contact-board h5 {
    font-size: 0.9rem;
    font-weight: 900;
    margin: 0 0 8px 0;
    color: #fcaec0; /* 薄ピンク */
    text-align: center;
    letter-spacing: 0.05em;
}

.recruit-contact-board p {
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
}

/* 社員インタビュー */
.recruit-interview-section {
    background-color: #ffffff;
    padding: 35px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.interview-container {
    width: 82%;
    background-color: #ffffff;
    border: 2.5px solid #231815;
    border-radius: 18px;
    box-shadow: 6px 6px 0px #231815;
    padding: 28px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 縦長楕円（カプセル）フレーム */
.interview-oval-frame {
    width: 130px;
    height: 180px;
    border: 2.5px solid #231815;
    border-radius: 65px; /* カプセル状にする */
    overflow: hidden;
    background-color: #e0e0e0;
    margin: 0 auto 18px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.15);
}

.interview-oval-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interview-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.interview-profile strong {
    font-size: 1.05rem;
    font-weight: 900;
    color: #231815;
    margin-bottom: 3px;
}

.interview-profile span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #666666;
}

.interview-quote {
    font-size: 0.85rem;
    font-weight: 700;
    color: #444444;
    line-height: 1.6;
    text-align: center;
    margin: 0 0 22px 0;
    font-style: italic;
    background-color: #fcfcfc;
    padding: 12px;
    border-radius: 8px;
    border: 1.5px solid #eeeeee;
}

.interview-btn-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* インタビュー記事はこちら ➔ ボタン（ピンク太枠） */
.interview-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ea6182;
    color: #ffffff;
    font-weight: 900;
    font-size: 0.95rem;
    text-decoration: none;
    border: 2.5px solid #231815;
    border-radius: 50px;
    padding: 10px 24px;
    box-shadow: 3.5px 3.5px 0px #231815;
    transition: transform 0.2s ease;
}

.interview-link-btn:hover {
    transform: scale(1.03);
}

/* エントリー連絡カプセルボタン */
.recruit-apply-section {
    background-color: #ffffff;
    padding: 35px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.apply-balloon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    width: 82%;
}

.apply-bubble {
    width: 100%;
    background-color: #ea6182;
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 12px;
    border: 2.5px solid #231815;
    box-shadow: 3.5px 3.5px 0px #231815;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.65;
    position: relative;
}

.apply-bubble::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 9px 7px 0;
    border-style: solid;
    border-color: #231815 transparent;
}

.apply-bubble::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px 6px 0;
    border-style: solid;
    border-color: #ea6182 transparent;
    z-index: 1;
}

.apply-contact-container {
    width: 82%;
    display: flex;
    justify-content: center;
}

.apply-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #231815;
    border-radius: 50px;
    background-color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 4px 4px 0px #231815;
}

.apply-btn:hover {
    transform: scale(1.02);
}

.apply-btn-text {
    font-size: 1.05rem;
    font-weight: 900;
    color: #231815;
    margin-right: 12px;
}

.apply-btn-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #231815;
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.95rem;
}