@charset "UTF-8";

/* ==========================================================================
   Webフォントの読み込み
   ========================================================================== */
@font-face {
    font-family: 'CP Font';
    src: url('../fonts/CP Font_0.otf') format('opentype');
    font-display: swap;
}

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

==========================================================================
*/
::-webkit-scrollbar {
    display: none;
}

html,
body {
    -ms-overflow-style: none;
    /* IE, Edge */
    scrollbar-width: none;
    /* Firefox */
}

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

html {
    scroll-behavior: smooth;
}

body {
    /* 指定のゴシック体を全体に適用 */
    font-family: 'Noto Sans JP', sans-serif;
    color: #000000;
    line-height: 1.6;
    width: 100%;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
    width: 100%;
    background-color: #FFFFFF;
    height: 200px;
    /* 帯の高さを200pxに変更 */
    position: fixed;
    /* Section1の上に乗せるためfixedに変更 */
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateY(0);
    transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s ease;
}

/* スクロール時の非表示用クラス */
.header.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
}

/* ==========================================================================
   Hamburger Menu
   ========================================================================== */
.hamburger {
    position: fixed;
    top: 30px;
    right: 4vw;
    width: 80px;
    height: 80px;
    background-color: transparent;
    /* 背景をなくして線のみに */
    border: none;
    cursor: pointer;
    z-index: 200;

    /* 初期状態は非表示（フェードアウト状態） */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-20px);
    transition: opacity 0.5s ease, visibility 0.5s ease, transform 0.5s ease;
}

/* 表示用クラス（JSで付与） */
.hamburger.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* ハンバーガーの3本線 */
.hamburger span {
    position: absolute;
    left: 15px;
    /* 丸(80px)に対して幅50pxを中央配置: (80-50)/2 = 15 */
    width: 50px;
    /* 線をさらに長く（40px → 50px） */
    height: 6px;
    /* さらに太く（4px → 6px） */
    background-color: #1F61F7;
    /* 通常時は青色に変更 */
    transition: all 0.4s ease;
}

.hamburger span:nth-child(1) {
    top: 22px;
}

.hamburger span:nth-child(2) {
    top: 37px;
}

/* 中央 */
.hamburger span:nth-child(3) {
    top: 52px;
}

/* ハンバーガー クリック時（開いている時）のアニメーションと色変更 */
.hamburger.is-active span {
    background-color: #FFFFFF;
    /* 開いた時は白色に変更 */
}

.hamburger.is-active span:nth-child(1) {
    transform: translateY(15px) rotate(45deg);
    /* 上線を中央へ移動し45度回転 */
}

.hamburger.is-active span:nth-child(2) {
    opacity: 0;
    /* 中央の線は透明に */
}

.hamburger.is-active span:nth-child(3) {
    transform: translateY(-15px) rotate(-45deg);
    /* 下線を中央へ移動し逆回転 */
}

/* ==========================================================================
   Drawer Menu (オーバーレイ)
   ========================================================================== */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: transparent;
    /* 画面全体の背景をなくす */
    z-index: 150;
    /* ヘッダーより上、ハンバーガー(200)より下 */
    display: flex;
    justify-content: flex-end;
    /* 右寄せ */
    align-items: center;
    padding: 0;

    /* 初期状態は非表示 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 表示用クラス（JSで付与） */
.drawer.is-active {
    opacity: 1;
    visibility: visible;
}

.drawer__list {
    background-color: rgba(31, 97, 247, 0.8);
    color: #FFFFFF;
    /* メニュー部分にだけ背景を敷く */
    height: 100vh;
    /* 縦は画面いっぱいに */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 縦中央揃え */
    padding-right: 10vw;
    /* 右側の余白 */
    padding-left: 200px;
    /* 一番長いテキストの頭から左に200pxの余白を確保 */
    text-align: right;
    /* 文字終わり揃え */

    /* 左側を緩やかな波線に切り抜くマスク */
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg width='30' height='300' viewBox='0 0 30 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0 C30 50, 30 100, 15 150 C0 200, 0 250, 15 300 L30 300 L30 0 Z' fill='black'/%3E%3C/svg%3E"),
        linear-gradient(black, black);
    mask-image:
        url("data:image/svg+xml,%3Csvg width='30' height='300' viewBox='0 0 30 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0 C30 50, 30 100, 15 150 C0 200, 0 250, 15 300 L30 300 L30 0 Z' fill='black'/%3E%3C/svg%3E"),
        linear-gradient(black, black);
    -webkit-mask-position: left top, 30px 0;
    mask-position: left top, 30px 0;
    -webkit-mask-repeat: repeat-y, no-repeat;
    mask-repeat: repeat-y, no-repeat;
    -webkit-mask-size: 30px 300px, calc(100% - 30px) 100%;
    mask-size: 30px 300px, calc(100% - 30px) 100%;
}

.drawer__list li {
    margin-bottom: 30px;
    /* 項目間の余白 */
    opacity: 0;
    transform: translateY(15px);
    /* 初期は少し下へ */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* 閉じる時の設定 */
}

.drawer__list li:last-child {
    margin-bottom: 0;
}

/* 表示時のアニメーション */
.drawer.is-active .drawer__list li {
    opacity: 1;
    transform: translateY(0);
}

/* 各項目に順番に素早くディレイをかける */
.drawer.is-active .drawer__list li:nth-child(1) {
    transition-delay: 0.10s;
}

.drawer.is-active .drawer__list li:nth-child(2) {
    transition-delay: 0.15s;
}

.drawer.is-active .drawer__list li:nth-child(3) {
    transition-delay: 0.20s;
}

.drawer.is-active .drawer__list li:nth-child(4) {
    transition-delay: 0.25s;
}

.drawer.is-active .drawer__list li:nth-child(5) {
    transition-delay: 0.30s;
}

.drawer.is-active .drawer__list li:nth-child(6) {
    transition-delay: 0.35s;
}

.drawer.is-active .drawer__list li:nth-child(7) {
    transition-delay: 0.40s;
}

.drawer__list a {
    color: #FFFFFF;
    /* 白色に変更 */
    font-size: 14px;
    /* ヘッダーと同じサイズ */
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: block;
}

.drawer__list a:hover {
    opacity: 0.7;
}

/* トップページ用の色指定（以前の色） */
.page-top .hamburger span {
    background-color: #FFFFFF;
}

.page-top .hamburger.is-active span {
    background-color: #1F61F7;
}

.page-top .drawer__list {
    background-color: rgba(255, 255, 255, 0.8);
    color: #1F61F7;
}

.page-top .drawer__list a {
    color: #1F61F7;
}

/* 1520px幅のコンテナ */
.header__inner {
    position: relative;
    max-width: 1520px;
    height: 100%;
    /* 親の高さに合わせる */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* 中央揃えを解除して上端基準に変更 */
    padding: 0 4vw;
    /* 左右に最低限の余白を設ける */
}

/* 左右のナビゲーション領域を均等にしてロゴを中央に固定 */
.header__nav {
    flex: 1;
    margin-top: 111px;
    /* 上から111pxの位置に配置 */
}

/* 左側ナビ：右寄せ（ロゴ側へ） */
.header__nav--left {
    display: flex;
    justify-content: flex-end;
}

/* 右側ナビ：左寄せ（ロゴ側へ） */
.header__nav--right {
    display: flex;
    justify-content: flex-start;
}

.header__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 50px);
    /* 項目同士の距離を近づける */
}

/* ロゴとナビゲーションの間の余白 */
.header__nav--left .header__nav-list {
    margin-right: 170px;
    /* 中央のロゴ領域を避けるために余白を確保 */
}

.header__nav--right .header__nav-list {
    margin-left: 170px;
    /* 中央のロゴ領域を避けるために余白を確保 */
}

/* ナビゲーションの各アイテム */
.header__nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* テキストスタイル */
.header__nav-item a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1F61F7;
    letter-spacing: 0.12em;
    /* 字間を少し広めに */
    white-space: nowrap;
    /* テキストを1行に収める（折り返し禁止） */
    transition: opacity 0.3s ease;
}

.header__nav-item a:hover {
    opacity: 0.7;
}

/* 区切り線の配置 */
.header__nav-item:not(:last-child)::after {
    content: "";
    position: absolute;
    /* gapの半分の位置（右側の外）に線を配置 */
    right: calc(clamp(20px, 3vw, 50px) / -2);
    top: 50%;
    transform: translateY(-50%) translateX(50%);
    /* 線自体の幅を考慮して中央合わせ */
    width: 1px;
    height: 14px;
    background-color: #1F61F7;
    opacity: 0.35;
    /* 区切り線は少し薄くする */
}

/* ロゴ部分 */
.header__logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    /* 丸みに合わせて幅を広く確保 */
    height: 254px;
    /* 指定された高さ */
    background-color: #FFFFFF;
    border-radius: 0 0 160px 160px;
    /* 下部を丸く飛び出させる */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* y座標を基準にするため上端合わせに変更 */
    padding-top: 58px;
    /* ご指定の y: 58px の位置に配置 */
}

.header__logo img {
    width: 147px;
    /* 指定のサイズに固定 */
    height: 151px;
    /* 指定のサイズに固定 */
    display: block;
}

/* ==========================================================================
   Section1 (FV)
   ========================================================================== */
.fv {
    position: relative;
    width: 100%;
    height: 1080px;
    /* 全体の高さを1080pxに固定 */
    /* 背景色を上から下へのグラデーションに変更 */
    background: linear-gradient(to bottom, #1F61F7 0%, #123991 100%);
    padding-top: 0;
    /* 画像がヘッダーの裏に潜り込んで見切れるように余白を削除 */
    overflow: hidden;
    /* コンテナ外にはみ出す要素がある場合のスクロールバー防止 */
    box-sizing: border-box;
}

/* 背景のノイズ（ザラザラ感）装飾 */
.fv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Figma指定のノイズ（#000000）を生成 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    /* x0.5 y0.5の細かさを表現 */
    opacity: 0.25;
    /* 不透明度25% */
    mix-blend-mode: normal;
    /* 黒色をそのまま乗せる */
    pointer-events: none;
    z-index: 0;
}

/* 1520px幅のコンテナ */
.fv__inner {
    position: relative;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0 4vw;
}

/* メイン画像のラッパー */
.fv__image-wrap {
    position: relative;
    width: 100%;
    /* 指定の横幅に変更 */
    max-width: 1620px;
    margin: 0 auto;
}

.fv__slider {
    position: relative;
    z-index: 2;
    width: 100%;
    /* 指定の比率（横1620px:縦980px）に変更 */
    aspect-ratio: 1620 / 980;
    /* 下の2つの頂点を角丸にする */
    border-radius: 0 0 50px 50px;
    overflow: hidden;
    background-color: #E4F0FE;
}

.fv__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 写真の被写体を枠内でさらに200px下へずらす */
    object-position: center calc(50% + 200px);
    display: block;
    opacity: 0;
    animation: fv-slide-anim 30s linear infinite;
    will-change: transform, opacity;
}

/* 各スライドの開始タイミングをずらす（最初から1枚目が見えるように-1.5sスタート） */
.fv__slide:nth-child(1) { animation-delay: -1.5s; }
.fv__slide:nth-child(2) { animation-delay: 4.5s; }
.fv__slide:nth-child(3) { animation-delay: 10.5s; }
.fv__slide:nth-child(4) { animation-delay: 16.5s; }
.fv__slide:nth-child(5) { animation-delay: 22.5s; }

@keyframes fv-slide-anim {
    0% {
        opacity: 0;
        transform: scale(1.15);
    }
    5% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    25% {
        opacity: 0;
        transform: scale(1.0);
    }
    100% {
        opacity: 0;
        transform: scale(1.0);
    }
}

/* ==========================================================================
   波打つ装飾（フルスクリーンCanvas）
   ========================================================================== */
.fv__main-wave-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    /* 背景グラデーションや画像の手前に配置 */
}

/* ==========================================================================
   Section1 追加装飾オブジェクト
   ========================================================================== */
.fv__deco {
    position: absolute;
    z-index: 6;
    /* 画像の手前・アメーバの一部より奥 */
    pointer-events: none;
    transition: transform 0.8s ease-out;
    /* JSでのマウス回避を滑らかに */
    animation: floatDeco 6s ease-in-out infinite;
    /* フワフワ上下移動 */
}

/* 上下フワフワアニメーション（JSのtransformと被らないようにmargin-topを使用） */
@keyframes floatDeco {

    0%,
    100% {
        margin-top: 0;
    }

    50% {
        margin-top: -15px;
    }
}

.fv__deco--star1 {
    top: 440px;
    left: calc(50% - 831px);
    animation-delay: 0s;
}

.fv__deco--star2 {
    top: 665px;
    left: calc(50% + 203px);
    animation-delay: -1s;
}

.fv__deco--star3 {
    top: 799px;
    left: calc(50% + 409px);
    animation-delay: -2s;
}

.fv__deco--star4 {
    top: 377px;
    left: calc(50% + 737px);
    animation-delay: -3s;
}

.fv__deco--ellipse1-1 {
    top: 419px;
    left: calc(50% - 738px);
    animation-delay: -4s;
}

.fv__deco--ellipse1-2 {
    top: 458px;
    left: calc(50% + 838px);
    animation-delay: -1.5s;
}

.fv__deco--ellipse2 {
    top: 809px;
    left: calc(50% + 307px);
    animation-delay: -2.5s;
}

/* タイトル "BAN Printing" */
.fv__title {
    position: absolute;
    bottom: -1vw;
    /* 写真の少し下にはみ出る程度に調整（1080px内に収める） */
    left: -3vw;
    /* 写真の左側に少し寄っている */
    font-family: 'Zen Old Mincho', serif;
    /* 明朝体 */
    font-size: clamp(60px, 9vw, 130px);
    /* 巨大な文字を可変に */
    font-weight: 500;
    color: #FFFFFF;
    line-height: 1;
    letter-spacing: 0.1em;
    /* 文字間を少し開ける */
    z-index: 10;
    /* 前面の装飾線より手前に配置 */
}

/* タイトルの一文字ずつフェードイン用 */
.fv__title-char {
    display: inline-block;
    opacity: 0;
    animation: fade-in-char 0.8s ease forwards;
}

@keyframes fade-in-char {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* Scroll コンテナ */
.fv__scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 下の要素をクリックできるようにする */
    z-index: 20;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    /* フェードアウトアニメーション */
    opacity: 1;
    visibility: visible;
}

/* スクロール時の非表示クラス */
.fv__scroll.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* Scroll テキスト */
.fv__scroll-text {
    position: absolute;
    left: 70px;
    /* x70 */
    top: 621px;
    /* y621 */
    writing-mode: vertical-rl;
    /* 縦書き */
    font-family: 'Noto Sans JP', sans-serif;
    /* ゴシック体 */
    font-size: 14px;
    color: #FFFFFF;
    letter-spacing: 0.3em;
}

/* Scroll 縦線 */
.fv__scroll-line {
    position: absolute;
    left: 77px;
    /* x77 */
    top: 730px;
    /* yを20px上へ（y730） */
    width: 1px;
    /* 太さ1px */
    height: 200px;
    /* 長さ200px (w200) */
    background-color: rgba(255, 255, 255, 0.3);
    /* ベースの線は薄く表示 */
}

/* 上から下へなぞるアニメーション線 */
.fv__scroll-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    transform-origin: top;
    animation: scrollDown 2s infinite ease-in-out;
}

/* スクロール線のアニメーション定義 */
@keyframes scrollDown {
    0% {
        transform-origin: top;
        transform: scaleY(0);
    }

    45% {
        transform-origin: top;
        transform: scaleY(1);
    }

    55% {
        transform-origin: bottom;
        transform: scaleY(1);
    }

    100% {
        transform-origin: bottom;
        transform: scaleY(0);
    }
}

/* ひし形の装飾（アニメーションに追従） */
.fv__scroll-line::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    /* 線の上端（スタート位置）に配置 */
    transform: translateX(-50%) rotate(45deg);
    /* 中央合わせして45度回転 */
    width: 6px;
    height: 6px;
    background-color: #FFFFFF;
    animation: diamondDown 2s infinite ease-in-out;
}

/* ひし形の追従アニメーション定義 */
@keyframes diamondDown {
    0% {
        transform: translateX(-50%) translateY(0) rotate(45deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    45% {
        transform: translateX(-50%) translateY(200px) rotate(45deg);
        opacity: 1;
    }

    55% {
        transform: translateX(-50%) translateY(200px) rotate(45deg);
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) translateY(200px) rotate(45deg);
        opacity: 0;
    }
}

/* お問い合わせボタン */
.fv__contact {
    position: absolute;
    right: 2vw;
    /* 右側に寄せる */
    bottom: 40px;
    /* 1080px枠内に確実に収まる位置 */
    width: 192px;
    /* ボタン全体サイズ固定 */
    z-index: 30;
    display: block;
    transition: transform 0.3s ease;
}

.fv__contact:hover {
    transform: scale(1.05);
}

.fv__contact img {
    width: 100%;
    height: auto;
    display: block;
}

.contact-svg-btn {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Section2
   ========================================================================== */
.section2 {
    position: relative;
    width: 100%;
    height: 1080px;
    /* FVと同様の高さ */
    background-color: #E4F0FE;
    /* 薄いブルー背景 */
    overflow: hidden;
    /* 装飾図形のはみ出しを隠す */
}

/* --- 背景ベクター装飾（個別ノイズ適用） --- */
.section2__vector {
    position: absolute;
    z-index: 0;
    /* 最背面（文字の下） */
}

.section2__vector img {
    display: block;
    width: 100%;
    height: auto;
}

/* SVG図形の形に合わせてノイズを切り抜き（マスク）して被せる */
.section2__vector-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: 150px 150px;
    opacity: 0.4;
    /* ノイズを見えやすく調整 */
    mix-blend-mode: multiply;
    /* overlayから変更しザラザラ感を強調 */
    pointer-events: none;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* section2_vector1.svg (右上へ配置) */
.section2__vector--1 {
    right: 0;
    top: 0;
    width: clamp(300px, 45vw, 850px);
}

/* section2_vector2.svg (左下へ配置) */
.section2__vector--2 {
    left: 0;
    bottom: 0;
    width: clamp(300px, 45vw, 850px);
}

/* --- 追加の円図形（個別ノイズ適用） --- */
.section2__circle {
    position: absolute;
    border-radius: 50%;
    background-color: #FF5A1C;
    /* オレンジ色 */
    border: 1px solid #000000;
    /* 黒い縁取りを追加 */
    overflow: hidden;
    /* 内包するノイズのはみ出しを防ぐ */
    z-index: 0;
}

.section2__circle-noise {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: 150px 150px;
    opacity: 0.4;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* 円1: vector1の左付近 */
.section2__circle--1 {
    left: calc(880 / 1920 * 100vw);
    top: 100px;
    width: clamp(100px, 9.375vw, 180px);
    /* 180px相当 */
    height: clamp(100px, 9.375vw, 180px);
}

/* 円2: vector2の上付近 */
.section2__circle--2 {
    left: calc(90 / 1920 * 100vw);
    top: 580px;
    width: clamp(50px, 4.68vw, 90px);
    /* 90px相当 */
    height: clamp(50px, 4.68vw, 90px);
}

/* 星型ベース */
.section2__star {
    position: absolute;
    z-index: 2;
    /* ノイズ等の上に配置 */
    transition: transform 0.8s ease-out;
    /* マウス回避用 */
    animation: floatDeco 6s ease-in-out infinite;
    /* フワフワ移動 */
}

/* Star_1.svg (ご指定：x1701 y643) */
.section2__star--1 {
    left: calc(1701 / 1920 * 100vw);
    top: 643px;
    width: clamp(50px, 4vw, 120px);
    animation-delay: -1s;
}

/* Star_2.svg (ご指定：x175 y479) */
.section2__star--2 {
    left: calc(175 / 1920 * 100vw);
    top: 479px;
    width: clamp(50px, 4vw, 120px);
    animation-delay: -2.5s;
}

/* ご指定の絶対配置要素（タイトル、点線、画像） */
.section2__title {
    position: absolute;
    left: calc(200 / 1920 * 100vw);
    top: 100px;
    font-size: 14px;
    color: #1F61F7;
    font-weight: 500;
    letter-spacing: 0.2em;
    z-index: 2;
}

.section2__title-line {
    position: absolute;
    left: 0;
    top: 136px;
    width: calc(586 / 1920 * 100vw);
    height: 1px;
    border-bottom: 1px dashed #1F61F7;
    z-index: 2;
}

.section2__copy {
    position: absolute;
    left: calc(362 / 1920 * 100vw);
    top: 379px;
    z-index: 2;
    color: #1F61F7;
    font-family: 'CP Font', sans-serif;
    font-weight: 700;
    width: calc(250 / 1920 * 100vw);
}

.section2__copy-row {
    display: flex;
    justify-content: space-between;
    font-size: calc(100 / 1920 * 100vw);
    line-height: 1.1;
}

.section2__copy-row--center {
    justify-content: center;
}

.section2__copy-row--center .small {
    font-size: calc(65 / 1920 * 100vw);
    /* 「を」だけ少し小さく */
    margin: 5px 0;
}

/* --- スクロール浮き出しアニメーション --- */
.js-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* --- スクロール上からのフェードダウン --- */
.js-fade-down {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* --- スクロール左からのスライドイン --- */
.js-slide-right {
    opacity: 0;
    transform: translateX(-15vw);
    /* 画面左側から */
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-slide-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- スクロール右からのスライドイン --- */
.js-slide-left {
    opacity: 0;
    transform: translateX(15vw);
    /* 画面右側から */
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-slide-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- テキストスクランブルアニメーション --- */
.js-scramble {
    opacity: 0;
    /* スクロール前は非表示 */
}

.js-scramble.is-scrambling {
    opacity: 1;
    /* スクランブル開始と同時に表示 */
}

/* --- コンテンツ要素 --- */
.section2__inner {
    position: relative;
    max-width: 1520px;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    z-index: 2;
    /* ノイズより手前 */
}

/* メインコンテンツ（右側テキストブロック用レイアウト） */
.section2__content {
    display: flex;
    justify-content: flex-end;
    /* テキストブロックを右寄せ */
    align-items: flex-start;
    padding: 0;
}

/* 右側：テキストブロック */
.section2__text-wrap {
    width: 45%;
    margin-top: 384px;
    /* +y5移動 (379px -> 384px) */
    margin-right: 5vw;
    /* 画面右端への余白 */
    z-index: 2;
}

.section2__text {
    font-size: clamp(14px, 1.2vw, 18px);
    color: #1F61F7;
    line-height: 2.2;
    /* ゆったりとした行間 */
    letter-spacing: 0.05em;
    font-weight: 500;
    /* 背景色(#E4F0FE)と同色の縁取り */
    text-shadow:
        1px 1px 0 #E4F0FE, -1px -1px 0 #E4F0FE,
        -1px 1px 0 #E4F0FE, 1px -1px 0 #E4F0FE,
        1px 0px 0 #E4F0FE, -1px 0px 0 #E4F0FE,
        0px 1px 0 #E4F0FE, 0px -1px 0 #E4F0FE;
}

.section2__text--mt {
    margin-top: 3em;
    /* 段落の間隔 */
}

/* ==========================================================================
   Section3
   ========================================================================== */
.section3 {
    width: 100%;
    position: relative;
    background-color: #E4F0FE;
    /* overflow: hidden; は影を落とすため削除。横はみ出しはbodyで制御 */
    padding-bottom: 0;
    z-index: 10;
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.15);
}

/* 各ブロック共通 */
.section3__block {
    position: relative;
    width: 100%;
    height: 700px;
    /* 画像の大きさに合わせて調整 */
    overflow: visible;
    z-index: 1;
}

/* 上から順に重なるように z-index を調整 */
.section3__block--marketing {
    background-color: transparent;
    /* SVGとセクションの背景色を生かすため透明に */
    height: 712px;
    /* 背景SVG（1840x712）に合わせた高さ調整 */
    z-index: 3;
}

.section3__bg {
    position: absolute;
    z-index: 0;
}

.section3__bg-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(1840 / 1920 * 100vw);
    aspect-ratio: 1840 / 712;
    z-index: 0;
}

.section3__bg--m {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(9px 8px 3px rgba(0, 0, 0, 0.2));
}

.section3__block--creative {
    background-color: transparent;
    /* SVGとセクションの背景色を生かすため透明に */
    height: 768px;
    /* 背景SVG（1915x768）に合わせた高さ調整 */
    z-index: 2;
    margin-top: 30px;
}

.section3__bg-wrap--creative {
    position: absolute;
    left: auto;
    right: calc(-10 / 1920 * 100vw);
    top: 0;
    width: calc(1915 / 1920 * 100vw);
    aspect-ratio: 1915 / 768;
    z-index: 0;
}

.section3__bg--c {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(-9px 8px 3px rgba(0, 0, 0, 0.2));
}

.section3__block--press {
    background-color: transparent;
    height: 712px;
    z-index: 1;
    margin-top: 30px;
}

/* 波紋（背景の円と線） */
.section3__bg-circle-wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1200px;
    height: 1200px;
    z-index: 1;
}

/* 各ブロックの波紋位置オフセット */
.section3__bg-circle-wrap--marketing {
    right: -200px;
}

.section3__bg-circle-wrap--creative {
    left: -200px;
}

.section3__bg-circle-wrap--press {
    right: -200px;
}

/* 中心の色付き円 */
.section3__bg-circle--base {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
}

.section3__block--marketing .section3__bg-circle--base {
    background-color: #FF5A1C;
    /* オレンジ */
}

.section3__block--creative .section3__bg-circle--base {
    background-color: #1F61F7;
    /* 青 */
}

.section3__block--press .section3__bg-circle--base {
    background-color: #FF5A1C;
    /* オレンジ */
}

/* 同心円の線 */
.section3__bg-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.section3__bg-line--1 {
    width: 780px;
    height: 780px;
}

.section3__bg-line--2 {
    width: 860px;
    height: 860px;
}

.section3__bg-line--3 {
    width: 940px;
    height: 940px;
}

.section3__bg-line--4 {
    width: 1020px;
    height: 1020px;
}

.section3__bg-line--5 {
    width: 1100px;
    height: 1100px;
}

.section3__bg-line--6 {
    width: 1180px;
    height: 1180px;
}

.section3__bg-line--7 {
    width: 1260px;
    height: 1260px;
}

/* インナー幅制限 */
.section3__inner {
    position: relative;
    width: calc(1520 / 1920 * 100vw);
    height: 100%;
    margin: 0 auto;
    padding: 0;
    z-index: 2;
    /* 波紋の手前 */
}

/* フレックスで左右に配置 */
.section3__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* CREATIVEはテキストが右、イラストが左なので逆転 */
.section3__content--reverse {
    flex-direction: row-reverse;
}

/* テキストエリア */
.section3__text-area {
    flex: 1;
    max-width: 650px;
    text-align: right;
}

.section3__text-area--right .section3__title-wrap {
    justify-content: flex-end;
}

.section3__text-area--marketing,
.section3__text-area--press {
    position: absolute;
    left: calc(200 / 1920 * 100vw);
    top: calc(180 / 1920 * 100vw);
    z-index: 2;
    width: auto;
    text-align: left;
}

.section3__text-area--left {
    text-align: left;
}

.section3__text-area--press {
    margin-top: -20px;
}

/* タイトル周り */
.section3__title-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}

.section3__icon {
    width: auto;
    height: clamp(35px, 3.5vw, 60px);
    /* テキストとのバランスをレスポンシブに調整 */
    margin-right: 20px;
}

.section3__title {
    font-family: 'CP Font', sans-serif;
    font-size: calc(48 / 1920 * 100vw);
    color: #FFFFFF;
    font-weight: 400;
    /* Regular */
    letter-spacing: 0.1em;
    margin: 0;
}

.section3__title-img {
    width: auto;
    height: 40px;
}

/* PRESSのボタン画像 */
.section3__btn-img {
    width: calc(140 / 1920 * 100vw);
    height: auto;
    margin-left: 30px;
    display: inline-block;
}

.press-btn {
    transition: transform 0.3s ease;
}

.press-btn:hover {
    transform: scale(1.05);
}

.press-btn svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
}

.press-btn:hover .press-btn__finger path:nth-child(1) {
    animation: bounceLeft 1.5s ease-in-out infinite;
}

@keyframes bounceLeft {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-20px);
    }

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

/* テキストスタイル */
.section3__text {
    font-size: clamp(14px, 1.1vw, 16px);
    color: #FFFFFF;
    line-height: 2.7;
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* 画像エリア */
.section3__img-area {
    position: relative;
    width: 700px;
    height: 100%;
}

/* イラストの配置 */
.section3__img {
    position: absolute;
    display: block;
}

/* MARKETINGイラスト */
.section3__img--m1 {
    position: absolute;
    width: calc(695 / 1920 * 100%);
    height: auto;
    /* 元画像の縦横比を維持 */
    bottom: 0;
    /* svgの底辺（親ブロックの底辺）から配置 */
    left: calc(914 / 1920 * 100%);
    filter: drop-shadow(0px -5px 0px rgba(0, 0, 0, 0.2));
    z-index: 1;
}

.section3__img--m2 {
    position: absolute;
    width: calc(600 / 1920 * 100%);
    height: auto;
    bottom: calc(-10 / 1920 * 100vw);
    left: calc(1318 / 1920 * 100%);
    filter: drop-shadow(0px -5px 0px rgba(0, 0, 0, 0.2));
    z-index: 2;
    clip-path: inset(0px 0px calc(10 / 1920 * 100vw) 0px);
}

/* CREATIVEイラスト */
.section3__img--c1 {
    width: 600px;
    height: 600px;
    object-fit: contain;
    top: 70px;
    left: -300px;
    filter: drop-shadow(0px -5px 0px rgba(0, 0, 0, 0.2));
    z-index: 1;
}

.section3__img--c2 {
    width: 500px;
    height: 500px;
    object-fit: contain;
    bottom: -43px;
    left: 130px;
    filter: drop-shadow(0px -5px 0px rgba(0, 0, 0, 0.2));
    z-index: 10;
    clip-path: inset(0px 0px 43px 0px);
}

/* PRESSイラスト */
.section3__img--p1 {
    position: absolute;
    width: calc(860 / 1920 * 100%);
    height: calc(860 / 1920 * 100vw);
    object-fit: contain;
    bottom: 0;
    left: calc(900 / 1920 * 100%);
    filter: drop-shadow(0px -5px 0px rgba(0, 0, 0, 0.2));
    z-index: 1;
}

.section3__img--p2 {
    position: absolute;
    width: calc(650 / 1920 * 100%);
    height: calc(650 / 1920 * 100vw);
    object-fit: contain;
    bottom: calc(-20 / 1920 * 100vw);
    left: calc(1150 / 1920 * 100% + 100px);
    filter: drop-shadow(0px -5px 0px rgba(0, 0, 0, 0.2));
    z-index: 2;
    clip-path: inset(0px 0px calc(20 / 1920 * 100vw) 0px);
}

/* ==========================================================================
   Section4
   ========================================================================== */
.section4 {
    position: relative;
    width: 100%;
    background-color: #1F61F7;
    /* 74px × 74pxの格子状の背景パターン */
    background-image:
        linear-gradient(to right, #1F7EEE 1px, transparent 1px),
        linear-gradient(to bottom, #1F7EEE 1px, transparent 1px);
    background-size: 74px 74px;
    padding: 270px 0 270px;
    /* 全体を30px上に引き上げ、下部余白を確保 */
    overflow: hidden;
}

/* 背景のノイズ（ザラザラ感）装飾 */
.section4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* FVと同じFigma指定のノイズ（#000000）を生成 */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    /* x0.5 y0.5の細かさを表現 */
    opacity: 0.25;
    /* 不透明度25% */
    mix-blend-mode: normal;
    /* 黒色をそのまま乗せる */
    pointer-events: none;
    z-index: 0;
}

.section4__title {
    position: absolute;
    top: 160px;
    /* カルーセルに合わせて30px引き上げ */
    left: 50%;
    transform: translateX(-50%);
    font-family: 'CP Font', sans-serif;
    color: #FFFFFF;
    font-size: 48px;
    letter-spacing: 0.2em;
    -webkit-text-stroke: 1px #000000;
    /* 黒色の縁取り */
    z-index: 3;
}



/* トゲトゲ（星型）装飾 */
.section4__star {
    position: absolute;
    background-color: #FF5A1C;
    /* オレンジ */
    z-index: 1;
    clip-path: polygon(43% 0%, 53% 20%, 75% 10%, 71% 30%, 98% 40%, 75% 55%, 85% 85%, 60% 75%, 45% 98%, 35% 75%, 10% 80%, 25% 55%, 2% 40%, 25% 25%, 15% 5%, 38% 15%);

}

.section4__star--1 {
    top: -244.05px;
    left: -209.18px;
    width: 489.13px;
    height: 437.37px;
    background-color: transparent;
    clip-path: none;
}

.section4__star--2 {
    right: 50px;
    bottom: 0px;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    background-color: transparent;
    clip-path: none;
}

/* 帯（上部と下部） */
.section4__obi-wrap {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
}

.section4__obi-wrap--top {
    top: 60px;
}

.section4__obi-wrap--bottom {
    bottom: 60px;
}

/* Section4用フェードイン */
.s4-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.s4-fade-in-title {
    opacity: 0;
    transform: translate(-50%, 30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.s4-fade-in-title.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* 帯の無限スクロール（スライダー） */
.section4__obi-slider {
    display: flex;
    width: 200%;
}

.section4__obi-slider--left {
    animation: slideLeft 30s linear infinite;
}

.section4__obi-slider--right {
    animation: slideRight 30s linear infinite;
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }

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

@keyframes slideRight {
    0% {
        transform: translateX(-50%);
    }

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

.section4__obi-img {
    width: 50%;
    /* 画面幅（親の幅）に合わせて伸縮 */
    height: auto;
    display: block;
    flex-shrink: 0;
}

/* BANINSATSU 装飾 */
.section4__obi-deco {
    position: absolute;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-size: 13px;
    letter-spacing: 0.15em;
    font-weight: 500;
}

.section4__obi-deco--top-right {
    top: 100%;
    margin-top: 20px;
    /* works_obi.svgの下の辺から20px下 */
    right: 50px;
    /* X1920を基準としたx1870 */
    align-items: flex-start;
    /* 縦書き文字とのバランス */
}

.section4__obi-deco--bottom-left {
    bottom: 100%;
    margin-bottom: 20px;
    /* works_obi.svgの上の辺から20px上 */
    left: 50px;
    /* 対角位置への調整 */
    align-items: flex-end;
}

.section4__obi-line {
    width: 120px;
    height: 1px;
    background-color: #FFFFFF;
    display: block;
}

/* テキストとの縦位置合わせ */
.section4__obi-deco--top-right .section4__obi-line {
    margin-top: 10px;
}

.section4__obi-deco--bottom-left .section4__obi-line {
    margin-bottom: 10px;
}

.section4__obi-deco--top-right .section4__obi-text {
    margin-left: 15px;
    margin-right: 0;
}

.section4__obi-deco--bottom-left .section4__obi-text {
    margin-left: 0;
    margin-right: 15px;
}

.section4__obi-text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: absolute;
    /* 横書きテキストと同じX座標に揃えるため独立配置 */
}

.section4__obi-deco--top-right .section4__obi-text-vertical {
    right: -28px;
    /* さらに-x2（左方向へ戻す） */
    top: 30px;
    /* y+30 */
    margin: 0;
}

.section4__obi-deco--bottom-left .section4__obi-text-vertical {
    left: -28px;
    /* 上部の right: -28px と完全に対称にする */
    bottom: 30px;
    margin: 0;
}

/* 中央エリア */
.section4__inner {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 200px;
    z-index: 5;
}

/* カルーセルの外枠（フル幅・ドラッグスクロール用） */
.section4__carousel-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    padding-top: 20px;
    /* ホバー時の上部見切れ防止 */
    padding-bottom: 20px;
    /* shadow見切れ防止 */
    /* VIEW MOREボタン削除によりmargin-bottomを削除 */
    /* スクロールバー非表示 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.section4__carousel-wrap::-webkit-scrollbar {
    display: none;
}

.section4__carousel-wrap.is-grabbing {
    cursor: grabbing;
    user-select: none;
}

/* カードのカルーセルレイアウト */
.section4__cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    width: max-content;
    padding: 0 30px;
    /* 両端の余白 */
}

/* カード本体 */
.section4__card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 45px 20px 20px 20px;
    /* タグ風デザインのための上部余白 */
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 3px rgba(1, 1, 0, 0.15);
    width: 380px;
    flex-shrink: 0;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時に少し飛び出る演出 */
.section4__card:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 10px rgba(1, 1, 0, 0.15);
}

/* タグのパンチ穴（ユーロ穴・ハンガー穴形状） */
.section4__card::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 20px;
    /* CSS内でSVGを描画し、ユーロ穴の形状と内側の影（インナーシャドウ）を再現 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cdefs%3E%3Cfilter id='shadow'%3E%3CfeOffset dx='0' dy='2'/%3E%3CfeGaussianBlur stdDeviation='1.5' result='offset-blur'/%3E%3CfeComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse'/%3E%3CfeFlood flood-color='black' flood-opacity='0.4' result='color'/%3E%3CfeComposite operator='in' in='color' in2='inverse' result='shadow'/%3E%3CfeComposite operator='over' in='shadow' in2='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M 4 8 H 14 A 6 6 0 0 1 26 8 H 36 A 4 4 0 0 1 36 16 H 4 A 4 4 0 0 1 4 8 Z' fill='%231F61F7' filter='url(%23shadow)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* カード左上の「BAN PRINTING」テキスト */
.section4__card::after {
    content: "BAN PRINTING";
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 11px;
    color: #1F61F7;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-family: "Inter", "Noto Sans JP", sans-serif;
}

/* カード内の画像枠 */
.section4__card-img-wrap {
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 10px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section4__card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    /* 画像のドラッグや右クリックを防止 */
    user-select: none;
    -webkit-user-drag: none;
}

/* カード下部コンテンツ */
.section4__card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

/* 「制作」ラベル */
.section4__card-label {
    background-color: #1F61F7;
    color: #FFFFFF;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
}

/* カードタイトル */
.section4__card-title {
    font-size: 14px;
    color: #000000;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

/* カード右下のオレンジ矢印ボタン */
.section4__card-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #FF5A1C;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.section4__card:hover .section4__card-btn {
    transform: translateX(3px);
}

/* 矢印をCSSで描画（→） */
.section4__card-arrow {
    position: relative;
    width: 14px;
    height: 2px;
    background-color: #FFFFFF;
    margin-right: 2px;
}

.section4__card-arrow::before {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    transform: rotate(45deg);
    background-color: transparent;
}

/* VIEW MOREボタン */
.section4__view-more {
    display: flex;
    justify-content: center;
}

.section4__view-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FF5A1C;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    padding: 12px 30px;
    border: 1px solid #000000;
    box-shadow: 4px 4px 0 #000000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.section4__view-more-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000000;
}

.section4__view-more-arrow {
    margin-left: 10px;
}

/* ==========================================================================
   Section5
   ========================================================================== */
.section5 {
    position: relative;
    width: 100%;
    /* モノクロ背景画像に半透明のグレーを被せる */
    background-image:
        linear-gradient(rgba(240, 240, 240, 0.85), rgba(240, 240, 240, 0.85)),
        url("../images/mk_sales.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 1080px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

/* ご指定の絶対配置要素（タイトル、点線） */
.section5__title {
    position: absolute;
    left: calc(200 / 1920 * 100vw);
    top: 100px;
    font-size: 14px;
    color: #1F61F7;
    font-weight: 500;
    letter-spacing: 0.2em;
    z-index: 2;
    opacity: 0;
    animation: s5-slideRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.section5__title-line {
    position: absolute;
    left: 0;
    top: 136px;
    width: calc(400 / 1920 * 100vw);
    height: 1px;
    border-bottom: 1px dashed #1F61F7;
    z-index: 2;
    opacity: 0;
    animation: s5-slideRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes s5-slideRight {
    0% {
        opacity: 0;
        transform: translateX(-15vw);
    }

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

/* 表コンテナ */
.section5__inner {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 2;
}

/* 会社概要表 */
.section5__table {
    width: 100%;
    border-collapse: collapse;
    background-color: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* 表全体の影 */
}

/* 行のストライプ */
.section5__table tr:nth-child(odd) {
    background-color: #E4F0FE;
    /* 薄い水色 */
}

.section5__table tr:nth-child(even) {
    background-color: #FFFFFF;
    /* 白 */
}

.section5__table th,
.section5__table td {
    padding: 20px 80px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
    color: #000000;
    line-height: 2.0;
    /* 行間広め */
    letter-spacing: 0.1em;
    font-weight: 500;
}

.section5__table th {
    width: 30%;
    font-weight: 700;
    letter-spacing: 0.2em;
    /* 項目名は字間を少し広く */
}

/* 4文字揃え */
.s5-justify {
    display: inline-block;
    width: 5.5em;
    text-align-last: justify;
    letter-spacing: 0;
}

/* 右下 お問い合わせボタン */
.section5__contact {
    position: absolute;
    right: 5vw;
    bottom: 100px;
    /* 枠内に収める */
    width: 192px;
    z-index: 10;
    display: block;
    transition: transform 0.3s ease;
}

.section5__contact:hover {
    transform: scale(1.05);
}

.section5__contact img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Section6
   ========================================================================== */
.section6 {
    position: relative;
    width: 100%;
    background-color: #E4F0FE;
    /* 薄い水色 */
    padding: 120px 0 100px;
    overflow: hidden;
}

/* ご指定の絶対配置要素（タイトル、点線） */
.section6__title {
    position: absolute;
    left: calc(200 / 1920 * 100vw);
    top: 100px;
    font-size: 14px;
    color: #1F61F7;
    font-weight: 500;
    letter-spacing: 0.2em;
    z-index: 2;
    opacity: 0;
    animation: s6-slideRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.section6__title-line {
    position: absolute;
    left: 0;
    top: 136px;
    width: calc(400 / 1920 * 100vw);
    height: 1px;
    border-bottom: 1px dashed #1F61F7;
    z-index: 2;
    opacity: 0;
    animation: s6-slideRight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes s6-slideRight {
    0% {
        opacity: 0;
        transform: translateX(-15vw);
    }

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

/* 中央Newsロゴ */
.section6__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.section6__news-svg {
    height: 120px;
    /* 100pxから20%拡大 */
    width: auto;
}

/* News線画アニメーション */
/* 線として描画される要素（.news-dot以外）にのみdashoffsetを適用し、最初からopacity:1にしておく */
.section6__news-svg path:not(.news-dot) {
    stroke-dasharray: var(--length);
    stroke-dashoffset: var(--length);
    opacity: 1;
}

/* 点（ドット）はストロークの長さ操作をせず、フェードインのみで表示させるため初期状態を透明にする */
.section6__news-svg path.news-dot {
    opacity: 0;
}

/* スクロール連動 (.is-visible) */
.section6__logo.is-visible .section6__news-svg path:not(.news-dot) {
    animation: drawNews var(--duration) ease-in-out var(--delay) forwards;
}

/* 点（ドット）用のフェードインアニメーション */
.section6__logo.is-visible .section6__news-svg path.news-dot {
    /* 書き上がるタイミングギリギリに早める */
    animation: fadeInDot 0.4s ease-in-out calc(var(--delay) + 0.05s) forwards;
}

@keyframes drawNews {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInDot {
    to {
        opacity: 1;
    }
}

/* 装飾の星（キラキラ型） */
.section6__star {
    position: absolute;
    z-index: 1;
    clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}

.section6__star--orange-1 {
    background-color: #FF5A1C;
    top: 80px;
    right: 12vw;
    width: 160px;
    height: 160px;
    transform: rotate(15deg);
}

.section6__star--blue-1 {
    background-color: #1F61F7;
    top: 230px;
    right: 8vw;
    width: 90px;
    height: 90px;
    transform: rotate(-15deg);
}

.section6__star--blue-2 {
    background-color: #1F61F7;
    top: 450px;
    left: 4vw;
    width: 140px;
    height: 140px;
    transform: rotate(20deg);
}

.section6__star--orange-2 {
    background-color: #FF5A1C;
    top: 600px;
    left: 8vw;
    width: 150px;
    height: 150px;
    transform: rotate(-10deg);
}

/* 中央エリア */
.section6__inner {
    position: relative;
    max-width: 1520px;
    /* カードリストの幅を1520pxに変更 */
    margin: 0 auto;
    padding: 0 4vw;
    z-index: 5;
}

/* リスト */
.section6__list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 0;
}

/* カード要素 */
.section6__item {
    display: flex;
    background-color: #FFFFFF;
    border-radius: 20px;
    box-shadow: 6px 6px 0px rgba(160, 160, 160, 0.4);
    /* 影を自然なグレーに調整 */
    border: 1px solid #dcdcdc;
    overflow: hidden;
    min-height: 160px;
}

/* 左側画像エリア */
.section6__item-img {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    border-right: 1px solid #f0f0f0;
}

.section6__item-img img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    /* サムネイルの影や枠線を全方向から少し深めに切り落として確実に隠す */
    clip-path: inset(6px);
}

.section6__item-img-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* 右側テキストエリア */
.section6__item-content {
    flex-grow: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #F8F9FA;
    /* ほんのり薄いグレー */
}

/* メタ情報（日付とラベル） */
.section6__item-meta {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.section6__item-date {
    color: #1F61F7;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin-right: 15px;
}

.section6__item-label {
    background-color: #1F61F7;
    color: #FFFFFF;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 2px;
    letter-spacing: 0.1em;
}

/* タイトル */
.section6__item-title {
    font-size: 16px;
    color: #000000;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

/* タイトル下の線 */
.section6__item-line {
    width: 100%;
    height: 1px;
    background-color: #333;
    margin-bottom: 12px;
}


/* 本文 */
.section6__item-text {
    font-size: 13px;
    color: #000000;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

/* リンク文字 */
.section6__item-link {
    text-decoration: underline;
    color: inherit;
    transition: opacity 0.3s ease;
}

.section6__item-link:hover {
    opacity: 0.7;
}

/* VIEW MOREボタン */
.section6__view-more {
    display: flex;
    justify-content: center;
}

.section6__view-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #1F61F7;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.15em;
    padding: 12px 30px;
    border: 1px solid #000000;
    box-shadow: 4px 4px 0 #000000;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.section6__view-more-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000000;
}

.section6__view-more-arrow {
    margin-left: 10px;
    font-size: 16px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    width: 100%;
    position: relative;
}

/* 上部 白背景エリア */
.footer__top {
    background-color: #FFFFFF;
    padding: 100px 0 80px;
}

.footer__top-inner {
    max-width: 1520px;
    /* 1520pxに修正 */
    margin: 0 auto;
    padding: 0 4vw;
}

/* 会社情報エリア */
.footer__company-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 左寄せベース */
    margin-bottom: 70px;
}

.footer__logo {
    width: 120px;
    flex-shrink: 0;
    margin-right: 180px;
    /* ロゴと会社情報の間に広い余白 */
}

.footer__logo img {
    width: 100%;
    height: auto;
    display: block;
}

.footer__company-info {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    /* 残りのスペースを3社で均等割 */
}

.footer__company-col {
    color: #1F61F7;
}

.footer__company-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}

.footer__company-name a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.footer__company-name a:hover {
    opacity: 0.7;
}

.footer__company-name a::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F61F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.footer__company-detail {
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* サイトリンクメニュー */
.footer__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 70px;
    margin-left: 300px;
    /* ロゴの幅(120px) + 余白(180px)に合わせて「トップページ」の位置を揃える */
}

.footer__nav li {
    list-style: none;
}

.footer__nav a {
    color: #1F61F7;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    /* 元の文字間隔に戻す */
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer__nav a:hover {
    opacity: 0.7;
}

/* バナーとSNS */
.footer__banners {
    display: flex;
    justify-content: flex-end;
    /* 右端（お問い合わせテキストの終わり位置）に合わせる */
    align-items: center;
    gap: 30px;
    padding: 0;
}

.footer__banner {
    display: block;
    height: 70px;
    transition: opacity 0.3s ease;
}

.footer__banner:hover {
    opacity: 0.7;
}

.footer__banner img {
    height: 100%;
    width: auto;
    display: block;
}

.footer__sns {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 30px;
    /* バナー群とSNSの間隔 */
}

.footer__sns-link {
    display: block;
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
}

.footer__sns-link:hover {
    transform: scale(1.1);
}

.footer__sns-link img {
    width: 100%;
    height: auto;
    display: block;
}

/* 下部 青背景エリア */
.footer__bottom {
    background: linear-gradient(180deg, #1F61F7 0%, #1F61F7 100%);
    padding: 40px 0 30px;
    color: #FFFFFF;
}

.footer__bottom-inner {
    max-width: 1520px;
    /* 1520pxに修正 */
    margin: 0 auto;
    padding: 0 4vw;
}

/* サブリンク */
.footer__sub-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    /* 元の間隔に戻す */
    margin-bottom: 25px;
}

.footer__sub-nav li {
    list-style: none;
}

.footer__sub-nav a {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer__sub-nav a:hover {
    opacity: 0.7;
}

/* 区切り線 */
.footer__bottom-line {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-bottom: 25px;
}

/* コピーライト */
.footer__copy {
    text-align: center;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #FFFFFF;
}

/* ==========================================================================
   Works Modal (ポップアップ)
   ========================================================================== */
.works-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.works-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
}

.works-modal__content {
    position: relative;
    width: auto;
    height: auto;
    max-width: 95vw;
    max-height: 95vh;
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 60px;
    z-index: 2;
    transform: translateY(20px);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.works-modal.is-active .works-modal__content {
    transform: translateY(0);
}

.works-modal__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 10;
}

.works-modal__close-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 3px;
    background-color: #1F61F7;
    /* 青の× */
    transition: background-color 0.3s;
}

.works-modal__close-line:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.works-modal__close-line:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.works-modal__close:hover .works-modal__close-line {
    background-color: #154CC2;
}

.works-modal__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.works-modal__img-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F5F5F5;
    border-radius: 12px;
    overflow: hidden;
    max-height: 60vh;
}

.works-modal__img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
}

.works-modal__text-wrap {
    text-align: center;
    width: 100%;
}

.works-modal__title {
    font-size: 24px;
    font-weight: bold;
    color: #1F61F7;
    margin-bottom: 0;
    line-height: 1.4;
}

/* ==========================================================================
   下層ページ用などの追加設定が必要な場合は以下に追記
   ========================================================================== */

/* ==========================================================================
   Official Character (Floating)
   ========================================================================== */
.floating-character {
    position: fixed;
    right: 20px;
    bottom: -15px;
    width: 150px;
    z-index: 100;
    display: block;
    transform: translateY(50%); /* 初期状態：頭が少し多めに見えるように調整 */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
}

/* ホバー時にひょこっと顔を出す */
.floating-character:hover {
    transform: translateY(0);
}

/* 跳ねるアニメーション（うさぎが跳ねるイメージ） */
@keyframes rabbitJump {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* ホバー中、画像と吹き出しに跳ねるアニメーションを適用 */
.floating-character:hover .floating-character__img,
.floating-character:hover .floating-character__bubble {
    animation: rabbitJump 0.8s ease-in-out infinite;
}

.floating-character__img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

/* 待機時の吹き出し浮遊アニメーション */
@keyframes floatBubble {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* 吹き出し (！) */
.floating-character__bubble {
    position: absolute;
    top: -50px;
    left: -25px;
    width: 54px;
    height: 54px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 28px;
    color: #FF5A1C;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    animation: floatBubble 2s ease-in-out infinite; /* 待機時にゆっくり上下する */
}

/* 吹き出しのしっぽ（大） */
.floating-character__bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 8px;
    width: 15px;
    height: 15px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 吹き出しのしっぽ（小） */
.floating-character__bubble::before {
    content: '';
    position: absolute;
    bottom: -22px;
    right: 0px;
    width: 8px;
    height: 8px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}