/* --- Global: 基本設定 --- */
html { scroll-behavior: smooth; scroll-padding-top: 160px; }
body { background-color: #f8fafc; overflow-x: hidden; margin: 0; }
img { border: none; outline: none; }

/* 背景レイヤー */
#global-bg { position: fixed; inset: 0; z-index: -20; background: linear-gradient(to bottom, #e0f2fe, #ffffff); perspective: 1000px; }
.grid-plane {
    position: absolute; inset: -100%;
    background-image: linear-gradient(to right, rgba(76, 184, 231, 0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(76, 184, 231, 0.15) 1px, transparent 1px);
    background-size: 60px 60px; transform: rotateX(60deg); animation: grid-move 20s linear infinite;
}
@keyframes grid-move { 0% { transform: rotateX(60deg) translateY(0); } 100% { transform: rotateX(60deg) translateY(60px); } }
#bubble-canvas { position: fixed; inset: 0; z-index: -10; pointer-events: none; }

/* --- 【Loader】ローディング画面 --- */
#loader { position: fixed; inset: 0; z-index: 10000; background: #050505; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.8s, visibility 0.8s; }
#loader.loaded { opacity: 0; visibility: hidden; }
.loader-log { font-family: 'DotGothic16', monospace; color: #4CB8E7; font-size: 10px; height: 80px; width: 220px; overflow: hidden; margin-bottom: 20px; line-height: 1.5; text-align: left; }
.loader-status { color: #4CB8E7; font-family: 'DotGothic16'; font-size: 12px; margin-top: 20px; letter-spacing: 0.2em; text-align: center; }
.loader-img-item { display: none; width: 64px; height: 64px; object-fit: contain; margin: 0 auto; transform-origin: center; }
.loader-img-item.loaded { display: block; }
.loader-fallback-circle {
    display: block;
    width: 42px;
    height: 42px;
    background: #4CB8E7;
    border-radius: 50%;
    margin: 0 auto;
    transform-origin: center;
    animation: pulse-scale 1.5s ease-in-out infinite;  /* ← 追加 */
}
.loader-img-item.loaded {
    display: block;
    animation: pulse-scale 1.5s ease-in-out infinite;  /* ← 追加 */
}

/* アニメーション */
@keyframes pulse-scale { 0%, 100% { transform: scale(1.0); } 50% { transform: scale(1.2); } }
@keyframes pulse-blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

/* --- ヘッダーロゴレイアウト --- */
header { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); border-bottom: 1px solid rgba(76, 184, 231, 0.1); }
.logo-circle { width: 46px; height: 46px; background-color: #4CB8E7; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-img-item { display: none; width: 100%; height: 100%; object-fit: contain; }
.logo-img-item.loaded { display: block; }
.header-logo-row { display: flex; align-items: center; height: 23px; overflow: hidden; }
.header-text-img { display: none; max-height: 23px; width: auto; object-fit: contain; }
.header-text-img.loaded { display: block; }
.header-text-fallback { display: block; color: #4CB8E7; font-weight: 900; white-space: nowrap; }
.header-text-fallback.top { font-size: 0.95rem; }
.header-text-fallback.bottom { font-size: 0.65rem; letter-spacing: 0.05em; }
.header-text-img.loaded + .header-text-fallback { display: none; }

.nav-btn { display: inline-block; padding: 0.6rem 1.4rem; border-radius: 9999px; font-weight: 900; font-size: 15px; border: 2px solid rgba(76, 184, 231, 0.2); background: white; color: #334155; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.nav-btn:hover { border-color: #4CB8E7; background-color: #E5F6FD; transform: translateY(-2px); }
.contact-special { color: #FF007F; border-color: rgba(255, 0, 127, 0.3); }

/* --- 浮遊カード --- */
.floating-card { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 2.5rem; box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; padding: 0; overflow: visible; }
.service-no-badge { position: absolute; top: -20px; left: -20px; width: 72px; height: 72px; color: white; border-radius: 1.25rem; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 2rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border: 4px solid white; z-index: 50; }
.service-header-band { width: 100%; padding: 1.25rem 2rem 0.75rem 5.5rem; border-radius: 2.5rem 2.5rem 0 0; margin: 0; display: block; }
.service-header-band h2 { color: white !important; font-size: 1.875rem; font-weight: 900; margin: 0; }
.service-description-body { padding: 2rem 3rem 4rem 5.5rem; text-align: left; }
.inline-link { color: #4CB8E7; text-decoration: underline; font-weight: 900; transition: opacity 0.3s; }
.inline-link:hover { opacity: 0.7; }
.service-banner { max-width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease; cursor: pointer; }
.service-banner:hover { transform: translateY(-5px); }
.type-01 { background-color: #FF007F !important; }
.type-02 { background-color: #4CB8E7 !important; }
.type-03 { background-color: #D97706 !important; }
.type-04 { background-color: #6366F1 !important; }
.type-05 { background-color: #1E293B !important; }
.service-icon { width: 100%; height: 3.5rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: flex-start; padding: 0 1.25rem; margin-bottom: 1.5rem; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }

/* --- 作品スライダー --- */
.slider-container { width: 70%; aspect-ratio: 16 / 9; background-color: #E5F6FD; overflow: hidden; position: relative; border-radius: 2.5rem; border: 4px solid white; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); margin: 0 auto; }
.slider-track { display: flex; height: 100%; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.slider-item { min-width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; }
.slider-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); color: white; text-align: left; }
.auto-ext { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s; }
.auto-ext.loaded { opacity: 1; }
.slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 40; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; }
.dot.active { background: #4CB8E7; transform: scale(1.2); }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255,255,255,0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 40; color: #334155; opacity: 0; transition: all 0.3s; }

/* 【修正】代表者画像の個別設定：正方形を解除し、全体が表示されるように */
#rep-img {
    object-fit: contain; /* 枠の中に全体を収める */
    background-color: transparent; /* 必要ならここで背景色を指定 */
}

#typing-text::after { content: '|'; animation: blink 1s infinite; margin-left: 4px; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

@media (max-width: 768px) {
    .slider-container { width: 90%; aspect-ratio: 4 / 3; }
    .service-header-band { padding: 1rem 1.5rem 0.5rem 3.5rem; }
    .service-description-body { padding: 1.5rem 1.5rem 2.5rem 2rem; }
    .service-no-badge { width: 56px; height: 56px; font-size: 1.5rem; top: -15px; left: -10px; }
    .service-icon { height: 3rem; }
}

/**
 * 【受託業務：修正】Zソート解決とアイコン・文字サイズの復旧
 */
.service-header-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.15rem 2.5rem;
    border-radius: 0.75rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    min-width: 320px;
    max-width: 95%;
    position: relative;
    /* isolation: isolate により、内部の Z-index 計算を独立させ、背景に隠れるのを防ぐ */
    isolation: isolate; 
}

/* アイコンと文字を背景よりも前面（Z軸上）に強制 */
.icon-box, 
.service-title-text {
    position: relative;
    z-index: 10;
}

/* アイコン（SVG）が消失しないようサイズを固定 */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.icon-box svg {
    width: 100% !important;
    height: 100% !important;
    stroke: #ffffff !important;
    stroke-width: 2.5;
    display: block;
}

/* 文字サイズの復旧：デフォルトを大きく、かつ自動調整 */
.service-title-text {
    font-size: 1.45rem;
    white-space: nowrap;
    line-height: 1;
    color: #ffffff !important;
}

.service-header-bar:hover {
    container-type: inline-size;
    transform: scale(1.05) translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* works_detail.html：画像ホバー拡大を無効化 */
#works-catalog-container img {
    transition: none !important;
    transform: none !important;
}

/* --- ハンバーガーメニュー --- */
.hamburger-line {
    display: block;
    width: 26px;
    height: 3px;
    background-color: #4CB8E7;
    border-radius: 9999px;
    transition: all 0.3s;
}

#hamburger-btn {
    background: white;
    border: 2px solid rgba(76, 184, 231, 0.3);
    border-radius: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9000;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s;
}

.mobile-menu-overlay.open {
    opacity: 1;
}

.mobile-menu-close {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    font-size: 1.5rem;
    color: #334155;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 9100;
    line-height: 1;
}

#mobile-nav .nav-btn {
    font-size: 1.2rem;
    padding: 0.8rem 2.5rem;
    min-width: 200px;
    text-align: center;
    display: block;
}

.hero-ratio-box {
    aspect-ratio: 16/8;  /* PC */
}
@media (max-width: 767px) {
    .hero-ratio-box {
        aspect-ratio: 16/10;  /* スマホ */
    }
}

@keyframes log-fadein { from { opacity: 0; } to { opacity: 1; } }
.loader-log p {
    animation: log-fadein 0.5s ease forwards;
}