/* ====================================
   Partnership Page Styles
   テーマ：Connection, Organic, Trust
   ==================================== */

/* --- Base Layout --- */
.partner-container {
    width: 90%;
    max-width: 1100px; /* 少し狭めて読みやすく */
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* --- Background (Grid + Particles) --- */
.partner-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    z-index: 0;
    pointer-events: none;
    background-color: #111; /* ロゴページに合わせた暗色 */
    overflow: hidden;
}

.partner-bg__grid {
    position: absolute;
    width: 200%; height: 200%;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    opacity: 0.5;
}

/* ふわふわ浮遊する光の粒子 */
.partner-bg__particles .particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(76,175,80,0.2) 0%, transparent 70%);
    animation: floatParticle 20s infinite ease-in-out;
}
.p1 { width: 300px; height: 300px; top: 20%; left: 10%; animation-duration: 25s; }
.p2 { width: 400px; height: 400px; bottom: 10%; right: 10%; animation-duration: 30s; animation-delay: -5s; }
.p3 { width: 200px; height: 200px; top: 40%; left: 50%; animation-duration: 20s; animation-delay: -10s; }

@keyframes floatParticle {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -30px); }
}

/* --- Breadcrumb --- */
.partner-breadcrumb {
    padding-top: 120px;
    padding-bottom: 20px;
    position: relative;
    z-index: 10;
}
.partner-breadcrumb__nav {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}
.partner-breadcrumb__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}
.partner-breadcrumb__link:hover { color: #4CAF50; }
.partner-breadcrumb__current { color: #4CAF50; margin-left: 5px; }
.partner-breadcrumb__separator { margin: 0 10px; font-size: 0.7em; }

/* --- Hero Section --- */
.partner-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 60px 0;
}
.partner-hero__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.partner-hero__content { flex: 1; max-width: 600px; }

.partner-hero__label {
    color: #4CAF50;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.partner-hero__title { margin-bottom: 2rem; }
.partner-hero__title-sub {
    display: block;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1rem;
    font-weight: normal;
}
.partner-hero__title-main {
    display: block;
    font-size: 4rem;
    line-height: 1.1;
    font-weight: bold;
    color: #fff; /* フォールバック（グラデーションが効かない環境用） */
    
    /* グラデーションテキストの設定 */
    background: linear-gradient(135deg, #fff 0%, #aaa 100%);
    -webkit-background-clip: text; /* Chrome, Safari用 */
    background-clip: text;         /* 標準プロパティ（警告対策） */
    
    -webkit-text-fill-color: transparent; /* 文字の中身を透明にする */
}

.partner-hero__desc {
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
    margin-bottom: 3rem;
    font-size: 1rem;
}

/* Visual Animation (Network) */
.partner-hero__visual {
    flex: 1;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.network-circle {
    position: relative;
    width: 300px;
    height: 300px;
}
.network-circle__core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    background: #4CAF50;
    border-radius: 50%;
    box-shadow: 0 0 20px #4CAF50;
    z-index: 10;
}
.network-circle__orbit {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
}
.orbit-1 { width: 100px; height: 100px; animation: spin 10s linear infinite; }
.orbit-2 { width: 200px; height: 200px; animation: spin 15s linear infinite reverse; }
.orbit-3 { width: 300px; height: 300px; animation: spin 20s linear infinite; }

.network-circle__dot {
    position: absolute;
    top: -4px; left: 50%;
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,255,255,0.8);
}

.network-node {
    position: absolute;
    background: rgba(20, 20, 20, 0.9);
    border: 1px solid #4CAF50;
    color: #4CAF50;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
}
.node-meo { top: 10%; right: 0; animation: floatNode 4s ease-in-out infinite; }
.node-seo { bottom: 10%; left: 0; animation: floatNode 5s ease-in-out infinite 1s; }
.node-dev { top: 50%; left: -20px; animation: floatNode 4.5s ease-in-out infinite 0.5s; }

@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes floatNode {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* --- Common Section --- */
.partner-section { padding: 100px 0; position: relative; }
.partner-section__header { text-align: center; margin-bottom: 4rem; }
.partner-section__title {
    font-size: 2.5rem; color: #fff; margin-bottom: 0.5rem;
}
.partner-section__subtitle { color: #4CAF50; font-size: 1rem; letter-spacing: 0.1em; }

/* --- Philosophy --- */
.partner-philosophy__box {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}
.partner-philosophy__title {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.2;
}
.partner-philosophy__text {
    font-size: 1.1rem;
    line-height: 2;
    color: rgba(255,255,255,0.9);
}
.partner-philosophy__text strong {
    color: #4CAF50;
    font-size: 1.2rem;
    border-bottom: 1px solid #4CAF50;
}

/* --- Diagnosis Grid --- */
.partner-diagnosis__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
}
.diagnosis-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 2rem;
    border-radius: 8px;
    transition: all 0.3s;
}
.diagnosis-card:hover {
    transform: translateY(-5px);
    background: rgba(76,175,80,0.05);
    border-color: #4CAF50;
}
.diagnosis-card--meo {
    border-color: rgba(76,175,80,0.5); /* MEOを少し強調 */
    box-shadow: 0 0 15px rgba(76,175,80,0.1);
}

.diagnosis-card__icon {
    font-size: 2.5rem;
    color: #4CAF50;
    margin-bottom: 1.5rem;
}
.diagnosis-card__title {
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 0.5rem;
}
.diagnosis-card__target {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 1.5rem;
    min-height: 3em; /* 高さ揃え */
}
.diagnosis-card__list {
    list-style: none; padding: 0;
}
.diagnosis-card__list li {
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.5rem;
    padding-left: 1.2rem;
    position: relative;
}
.diagnosis-card__list li::before {
    content: '\f00c'; /* FontAwesome Check */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute; left: 0;
    color: #4CAF50;
    font-size: 0.8rem;
}

/* --- Cases --- */
.case-row {
    display: flex; gap: 2rem; justify-content: center;
}
.case-item {
    flex: 1; max-width: 500px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    overflow: hidden;
}
.case-item__head {
    background: rgba(76,175,80,0.1);
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.case-item__label {
    display: block; font-size: 0.8rem; color: #4CAF50; letter-spacing: 0.1em;
}
.case-item__title {
    font-size: 1.2rem; color: #fff; margin-top: 0.5rem;
}
.case-item__body { padding: 2rem; }

.case-problem {
    display: flex; gap: 1rem; align-items: flex-start;
    margin-bottom: 1.5rem;
}
.case-problem i { color: #aaa; font-size: 1.5rem; margin-top: 5px; }
.case-problem p { color: rgba(255,255,255,0.8); font-style: italic; }

.case-arrow { text-align: center; color: #4CAF50; margin-bottom: 1.5rem; font-size: 1.2rem; }

.case-solution h4 { color: #4CAF50; font-size: 1.1rem; margin-bottom: 0.5rem; }
.case-solution p { color: #fff; line-height: 1.6; font-size: 0.95rem; }

/* --- Flow --- */
.partner-flow__desc {
    text-align: center; color: #fff; line-height: 2; margin-bottom: 3rem;
}
.flow-steps {
    display: flex; gap: 1rem;
    justify-content: space-between;
}
.flow-step {
    flex: 1;
    background: rgba(255,255,255,0.05);
    padding: 1.5rem;
    border-radius: 5px;
    position: relative;
    border: 1px solid transparent;
}
.flow-step--active {
    border-color: #4CAF50;
    background: rgba(76,175,80,0.1);
}
.flow-step__num {
    font-size: 1.5rem; color: rgba(255,255,255,0.2); font-weight: bold; margin-bottom: 0.5rem;
}
.flow-step--active .flow-step__num { color: #4CAF50; }

.flow-step__title {
    font-size: 1.1rem; color: #fff; margin-bottom: 0.8rem; font-weight: bold;
}
.flow-step__text {
    font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.5;
}

/* --- FAQ --- */
.partner-faq__list { max-width: 800px; margin: 0 auto; }
.partner-faq__item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.partner-faq__q {
    font-size: 1.1rem; color: #fff; margin-bottom: 1rem; display: flex; align-items: center;
}
.partner-faq__q .q-mark {
    background: #4CAF50; color: #fff; width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; margin-right: 15px; font-size: 0.9rem;
}
.partner-faq__a {
    color: rgba(255,255,255,0.8); line-height: 1.8; display: flex; align-items: flex-start;
}
.partner-faq__a .a-mark {
    color: #4CAF50; width: 30px; text-align: center; margin-right: 15px; font-weight: bold;
}

/* --- CTA --- */
.partner-cta {
    padding: 100px 0; text-align: center;
    background: linear-gradient(0deg, rgba(76,175,80,0.1) 0%, transparent 100%);
}
.partner-cta__title { font-size: 3rem; color: #fff; margin-bottom: 1rem; }
.partner-cta__text { color: #fff; font-size: 1.1rem; line-height: 1.8; margin-bottom: 3rem; }

/* Buttons */
.partner-btn {
    display: inline-block;
    padding: 1.2rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}
.partner-btn--primary {
    background: transparent;
    border: 1px solid #4CAF50;
    color: #4CAF50;
}
.partner-btn--primary:hover {
    background: #4CAF50; color: #fff;
}
.partner-btn--cta {
    background: #4CAF50; color: #fff;
    box-shadow: 0 5px 20px rgba(76,175,80,0.4);
}
.partner-btn--cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(76,175,80,0.6);
}
.partner-cta__note {
    display: block; margin-top: 1.5rem; color: rgba(255,255,255,0.5); font-size: 0.85rem;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .partner-hero__container { flex-direction: column; text-align: center; }
    .partner-hero__content { margin-bottom: 4rem; width: 100%; }
    .partner-hero__visual { width: 100%; height: 300px; }
    
    .case-row { flex-direction: column; }
    .flow-steps { flex-direction: column; }
    .flow-step { margin-bottom: 1rem; }
}

@media (max-width: 480px) {
    .partner-hero__title-main { font-size: 2.8rem; }
    .partner-philosophy__title { font-size: 1.8rem; }
}
/* partnership.css 追記・修正案 */

/* 日本語メインにしたため、フォントサイズを少し調整 */
.partner-hero__title-main {
    font-size: 3rem; /* 4remだと日本語には少し大きすぎる場合があるため調整 */
    line-height: 1.4;  /* 行間を少し広げて読みやすく */
    background: none;  /* グラデーション文字を解除して、白文字で視認性重視にしても良い */
    color: #fff;
    -webkit-text-fill-color: initial;
    background-clip: border-box;
}

.partner-philosophy__title {
    font-size: 2rem; /* 日本語見出し用に調整 */
    line-height: 1.6;
}

.partner-cta__title {
    font-size: 2.2rem;
    margin-bottom: 2rem;
}

/* スマホ対応 */
@media (max-width: 480px) {
    .partner-hero__title-main { font-size: 1.5rem; }
    .partner-philosophy__title { font-size: 1.5rem; }
    .partner-cta__title { font-size: 1.6rem; }
}



/* ====================================
   Mobile Optimization (追記分)
   ・全体的なサイズ縮小
   ・テキストの左寄せ統一
   ==================================== */

   @media (max-width: 768px) {

    /* --- レイアウトと余白の縮小 --- */
    .partner-section {
        padding: 60px 0; /* 上下の余白を100pxから60pxへ縮小 */
    }
    
    .partner-container {
        width: 88%; /* 横幅を少し広げて表示領域を確保 */
    }

    /* --- テキストの左寄せ統一 --- */
    /* ヒーローエリア、セクション見出し、哲学、CTA、フロー説明を一括で左寄せ */
    .partner-hero__container,
    .partner-hero__content,
    .partner-section__header,
    .partner-philosophy__box,
    .partner-flow__desc,
    .partner-cta,
    .partner-cta__inner {
        text-align: left !important;
        align-items: flex-start; /* Flexboxアイテムも左寄せ */
    }

    /* 見出しの下線や装飾の位置調整（左寄せに伴い左端へ） */
    .partner-hero__label,
    .partner-section__subtitle {
        margin-left: 0;
        display: inline-block;
    }

    /* --- フォントサイズの全体縮小 --- */
    
    /* ヒーローエリア */
    .partner-hero {
        min-height: auto; /* 全画面拘束を解除 */
        padding-top: 40px;
    }
    .partner-hero__title-main {
        font-size: 1.8rem; /* 3.5rem -> 2.4rem */
        line-height: 1.3;
    }
    .partner-hero__title-sub {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }
    .partner-hero__desc {
        font-size: 0.9rem;
        line-height: 1.7;
        margin-bottom: 2rem;
    }
    
    /* ヒーローのビジュアル（ネットワーク図）も少し小さくして余白調整 */
    .partner-hero__visual {
        height: 250px;
        margin-top: 2rem;
        transform: scale(0.8); /* 全体を80%に縮小 */
        transform-origin: center top;
    }

    /* セクション見出し */
    .partner-section__header {
        margin-bottom: 2.5rem; /* 余白縮小 */
    }
    .partner-section__title {
        font-size: 1.8rem; /* 2.5rem -> 1.8rem */
        line-height: 1.3;
    }

    /* Philosophy（NO CONSULTING FEE） */
    .partner-philosophy__box {
        padding: 2rem 1.5rem; /* 内側の余白を縮小 */
    }
    .partner-philosophy__title {
        font-size: 1.6rem; /* 2rem -> 1.6rem */
        margin-bottom: 1.5rem;
    }
    .partner-philosophy__text {
        font-size: 0.95rem; /* 本文も少し小さく */
        line-height: 1.8;
    }

    /* カード型レイアウト（MEOなど） */
    .partner-diagnosis__grid {
        gap: 1.5rem; /* 間隔を詰める */
    }
    .diagnosis-card {
        padding: 1.5rem;
    }
    .diagnosis-card__title {
        font-size: 1.1rem;
    }

    /* Case Study */
    .case-item__head,
    .case-item__body {
        padding: 1.5rem;
    }
    .case-problem p,
    .case-solution p {
        font-size: 0.9rem;
    }

    /* CTA（お問い合わせ） */
    .partner-cta {
        padding: 60px 0;
    }
    .partner-cta__title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    .partner-cta__text {
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }
    
    /* ボタンをスマホでは幅いっぱいにすると押しやすい */
    .partner-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem;
        box-sizing: border-box;
    }
    .partner-hero__btn-area {
        width: 100%;
    }
}