/* ==========================================================================
   RYUHEIDOU / Layout
   ・コンテンツは1カラム。1180px 未満では画面幅いっぱい（左右に余白を作らない）、
     1180px 以上で 500px に絞る
   ・1180px 以上で左右にレールが出る
   ・レールの中は「縦組みワードマーク」と「ウィジェット列」の横並び。
     ワードマークは左右どちらのレールでも必ずサイト本体側に寄せる。
   ========================================================================== */

/* ----- シェル：レール／カラム／レール --------------------------------- */
.shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
}

.column {
    width: 100%;
    max-width: var(--col);
    margin-inline: auto;
    /* 紙が1枚乗っている見え方にする */
    background-color: var(--paper-2);
    border-inline: var(--border);
    position: relative;
    z-index: 1;
}

/* レールはモバイルでは存在ごと消す（DOMは残すが非表示） */
.rail {
    display: none;
}

@media (min-width: 1180px) {
    /* ここではじめてカラムを 500px に絞る。
       余白はレールが埋めるので、死んだ余白にはならない。 */
    :root {
        --col: var(--col-pc);
    }

    .shell {
        grid-template-columns:
            minmax(0, var(--rail)) var(--col-pc) minmax(0, var(--rail));
        column-gap: var(--rail-gap);
    }

    .rail {
        display: block;
        position: sticky;
        top: 0;
        align-self: start;
        height: 100vh;
        padding-block: var(--sp-5);
        overflow: hidden;
    }

    /* ワードマーク（縦組み）とウィジェット列を横に並べる。
       DOM の順序をそのまま視覚順にしているので、
       左レールは [列][ワードマーク]、右レールは [ワードマーク][列]。 */
    .rail__inner {
        display: flex;
        flex-direction: row;
        gap: var(--sp-3);
        height: 100%;
    }

    /* ウィジェットを積む列。画面が低くて入りきらない場合はここだけ縦スクロール。
       影と傾きが数px はみ出すので、横は padding で逃がして hidden で止める
       （そうしないと横スクロールバーが出る）。 */
    .rail__stack {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
        padding-inline: 5px;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* さらに広い画面ではレールを広げる（カラムは500pxのまま） */
@media (min-width: 1440px) {
    :root {
        --rail: 340px;
        --rail-gap: 3rem;
    }
}

/* ----- カラム内のセクション ------------------------------------------- */
.section {
    padding: var(--sp-7) var(--col-pad);
    border-bottom: var(--border);
    position: relative;
}

.section:last-of-type {
    border-bottom: none;
}

/* セクション見出し：切り抜き見出し + 通し番号 */
.section__head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.section__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    /* 通し番号はブランドカラーで統一する */
    color: var(--blue-ink);
    background: var(--blue);
    padding: 2px var(--sp-2);
    flex: none;
    transform: rotate(var(--tilt-c));
}

.section__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    background: var(--acid);
    padding: 0.15em 0.35em 0.2em;
    border: var(--border);
    box-shadow: var(--shadow-sm);
    transform: rotate(var(--tilt-b));
}

.section__ja {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    margin-left: auto;
    flex: none;
}

/* セクション末尾の「もっと見る」導線 */
.section__more {
    margin-top: var(--sp-5);
    display: flex;
    justify-content: flex-end;
}

/* ----- カード等を積む箱 ------------------------------------------------ */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.stack--lg {
    gap: var(--sp-5);
}

/* ----- 中間幅（720〜1179px：レールが出ず、カラムが画面幅いっぱいになる帯）----
   カードや図版を 500px 設計のまま横に伸ばすと間延びするので、段組みにして
   「余白ではなく中身」で幅を使い切る。本文だけは段組みにできないので
   読みやすい行長で頭打ちにする。1180px 以上はレールが幅を吸うので不要。

   ここは .stack / .section を持つ layout.css のぶん。
   .features や .gallery など下層ページの部品は pages.css の末尾に同じ帯がある。
   どちらも「定義より後ろ」に置かないとカスケードで負けるので、
   必ずファイル末尾に置くこと。 */
@media (min-width: 720px) and (max-width: 1179.98px) {

    /* auto-fit なので、要素が1つのときは段組みにならず横いっぱいに伸びる */
    .stack {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
        align-items: start;
    }

    .section > p {
        max-width: var(--measure);
    }
}