/*
==========================================================================
   ALGO MASTER FOUNDATION - 物理ロック版 (2026.01.14 Final)
==========================================================================
*/

/* 1. リセット & ベース */
* { margin: 0; padding: 0; box-sizing: border-box !important; }
body {
    background: #ffffff;
    color: #2f2f2f;
    font-family: "Hiragino Mincho ProN", serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; transition: opacity 0.3s; }
a:hover { opacity: 0.6; }

/* 2. 物理グリッド定義 (1920px基準) */
.algo-site { width: 100%; max-width: 1920px; margin: 0 auto; position: relative; }
.grid-row { display: flex; flex-wrap: wrap; width: 100%; border-bottom: 1px solid #f0f0f0; }

/* 強制物理ユニット */
.u-unit { width: 480px; flex: 0 0 480px; border-right: 1px solid #f0f0f0; min-height: 480px; display: flex; flex-direction: column; }
.u-double { width: 960px; flex: 0 0 960px; border-right: 1px solid #f0f0f0; min-height: 480px; display: flex; flex-direction: column; }
.u-4 { width: 100%; flex: 0 0 100%; display: flex; flex-direction: column; }

/* BLOG専用：変則比率（サイドバーを380pxに絞る） */
.u-blog-main { flex: 1; min-height: 480px; border-right: 1px solid #f0f0f0; display: flex; flex-direction: column; }
.u-blog-side { width: 380px; flex: 0 0 380px; min-height: 480px; display: flex; flex-direction: column; }

/* 高さ固定 */
.h-480 { height: 480px !important; }
.h-960 { height: 960px !important; }

/* 3. センター配置ガード (inner-pad-center) */
.inner-pad-center { 
    padding: 80px 60px; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}

/* 4. ヘッダー (ADDRESS: A1 - D1) */
.algo-header { width: 100%; height: 100px; background: #fff; border-bottom: 1px solid #f0f0f0; }
.algo-header__inner { 
    max-width: 1920px; height: 100px; margin: 0 auto; padding: 0 60px;
    display: flex; justify-content: space-between; align-items: center; 
}
.algo-header__logo { font-size: 20px; font-weight: bold; letter-spacing: 0.4em; }
.algo-header__nav ul { display: flex; list-style: none; gap: 40px; align-items: center; }
.algo-header__nav a { font-size: 11px; letter-spacing: 0.2em; color: #2f2f2f; }

/* ヘッダーCONTACT：黒枠を外す */
.nav-contact-btn {
    border: none !important;
    padding: 8px 0; /* 枠がないので左右パディングを調整 */
    font-weight: bold;
}

/* 5. デザインDNA */
.addr-tag { font-family: sans-serif; font-size: 10px; color: #ccc; letter-spacing: 0.1em; margin-bottom: 30px; text-transform: uppercase; }
h1, h2, h3 { font-weight: 400; letter-spacing: 0.25em; line-height: 1.6; }
.bg-light { background: #f9f9f9; }
.bg-soft { background: #f4f4f4; }
.bg-deep { background: #2f2f2f; color: #fff; }

/* 6. レスポンシブ (iPhone SE / 959px以下) */
@media (max-width: 1919px) {
    /* 1920px未満では2列ずつに */
    .u-unit, .u-double { width: 50%; flex: 0 0 50%; }
}
@media (max-width: 959px) {
    /* スマホサイズでは全幅1列に */
    .u-unit, .u-double, .u-blog-main, .u-blog-side { 
        width: 100%; flex: 0 0 100%; min-height: auto; border-right: none; 
    }
    .h-480, .h-960 { height: auto !important; min-height: 320px; }
    .algo-header__inner { flex-direction: column; height: auto; padding: 20px; gap: 15px; }
    .algo-header__nav ul { gap: 15px; flex-wrap: wrap; justify-content: center; }
}/* --- BLOG & CONTACT: 物理位置の最終固定 --- */

/* すべての文字の開始位置を左上にロック */
.inner-pad-blog, 
.inner-pad-center {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* これで上下の位置を統一 */
    align-items: flex-start;    /* これで左右の位置を統一 */
    height: 100%;
    width: 100%;
    text-align: left;           /* アートとして左揃えに固定 */
}

/* スライダーやHEROなど、中央揃えが必要な箇所だけ上書き */
.page-index .slider-section .inner-pad-center,
.page-about .grid-row:first-of-type .inner-pad-center,
.page-company .grid-row:first-of-type .inner-pad-center,
.page-blog .grid-row:first-of-type .inner-pad-center,
.page-contact .grid-row:first-of-type .inner-pad-center {
    align-items: center;
    text-align: center;
    justify-content: center;
}

/* 右側サイドバーの底抜け防止 */
.grid-row-flex {
    display: flex;
    align-items: stretch; /* これで左右のブロックの高さを強制的に揃える */
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
}

.u-blog-side {
    width: 480px;
    flex: 0 0 480px;
    background-color: #ffffff;
    border-left: 1px solid #f0f0f0;
}

@media (max-width: 959px) {
    .grid-row-flex { flex-direction: column; }
    .u-blog-side { width: 100%; flex: 0 0 auto; border-left: none; }
}