/* =========================================
           0. Font Definition (@font-face)
           ========================================= */
           @font-face {
            font-family: "ls-350";
            src: url("assets/TWKLausanne-350.woff") format("woff");
            font-weight: 700;
            font-style: normal;
            unicode-range: U+0000-007F, U+2000-21FF, U+2197, U+0100-017F;
        }
        
        @font-face {
            font-family: "ls-450";
            src: url("assets/TWKLausanne-450.woff") format("woff");
            font-weight: 700;
            font-style: normal;
            unicode-range: U+0000-007F, U+2000-21FF, U+2197, U+0100-017F;
        }
        @font-face {
            font-family: "ls-200";
            src: url("assets/TWKLausanne-200.woff") format("woff");
            font-weight: 200;
            font-style: normal;
            unicode-range: U+0000-007F, U+2000-21FF, U+2197, U+0100-017F;
        }
        
                /* =========================================
                   1. Variables & Reset
                   ========================================= */
                :root {
                    --content-margin: clamp(
                        12px,
                        calc(12px + (24 - 12) * ((100vw - 480px) / (1024 - 480))),
                        24px
                      );
                    --grid-columns: 5;
                    --header-height: 72px;
                    --bar-height: 28px;
                    
                    --dot-size: 6px; 
                    --color-dot: #000;
        
                    --font-base: "ls-450", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
                    --font-head: "ls-350", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
                    --font-marquee: "ls-200", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif;
                    --font-size: 12px;
                    --font-weight-base: 600;
                    
                    --color-text: #111;
                    --color-bg: #f5f5f5;
        
                    /* グリッド1行の高さ定義 */
                    --grid-cell: calc((100vw - (var(--content-margin) * 2)) / var(--grid-columns));
                }
        
                * {
                    box-sizing: border-box;
                    margin: 0;
                    padding: 0;
                }
        
                html {
                    font-size: var(--font-size);
                    font-family: var(--font-base);
                    background-color: var(--color-bg);
                    color: var(--color-text);
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }
        
                body {
                    position: relative;
                    min-height: 100vh;
                    width: 100%;
                    overflow-x: hidden;
                    font-weight: var(--font-weight-base);
                }
        
                a { text-decoration: none; color: inherit; }
                ul { list-style: none; }
        
                /* [class*="visual"] {
                    overflow: hidden;
                    position: relative;
                    clip-path: inset(var(--dot-size) 0 0 var(--dot-size));
                } */
        
                img { 
                    display: block; 
                    width: 100%; 
                    height: 110%; 
                    object-fit: cover; 
                    will-change: transform;
                }
        
                /* =========================================
                   Typography Rules
                   ========================================= */
                p {
                    font-size:20px;
                    font-feature-settings: "palt";
                    line-height: 1.75;
                    text-align: justify;
                    text-justify: inter-ideograph;
                    word-break: break-all;
                    font-weight: 600;
                }
        
                h1, h2, h3, h4, h5, h6 {
                    line-height: 1;
                    font-weight: var(--font-weight-base); 
                    font-feature-settings: "palt";
                    letter-spacing: -0.03em;
                    font-weight: 600;
                }
                h1{
                    font-family: var(--font-head);
                }
                h2{
                    font-family: var(--font-base);
                }
                h3{
                    font-family: var(--font-base);
                }
                h4{
                    font-family: var(--font-base);
                }
                h1, h2{ font-size:75px; }
                h3{ font-size:40px; }
        
                /* Background Dots System */
                .dots-layer {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: calc( 100% - 42px );
                    z-index: -10;
                    pointer-events: none;
                    margin-top: 42px; 
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='6' height='6' fill='%23000000'/%3E%3C/svg%3E");
                    background-size: var(--grid-cell) var(--grid-cell);
                    background-position: var(--content-margin) 0; 
                    opacity: 1.0;
                }
                .header-content a:hover,
                .sp-nav-links a:hover,
                .sticky-title a:hover {
                  opacity: 0.6;
                }
                announcement {
                    position: fixed;
    top: 0;
    width: 100vw;
    background-color: #f5f5f5;
    display: flex;
    gap: 16px;
    align-items: center;
    height: var(--bar-height);
    color: #111;
    line-height: 1;
    z-index: 2000;
    border-bottom: 1px solid #ccc;
                }
                
                .marquee-wrp {
                    overflow: hidden;
                    white-space: nowrap;
                    position: relative;
                    width: 100%;
                }
                .marquee {
                    display: inline-flex;
                    gap: 2rem;
                    padding-block: 0.5rem;
                    will-change: transform;
                    color: #666;
                    font-family: var(--font-marquee);
                    font-weight:200;
                }
                
                .marquee span {
                    display: inline-block;
                    font-size: 12px; /* span指定を統一 */
                    letter-spacing: 0.05em;
                    text-transform: uppercase;
                    text-shadow: none;
                    flex-shrink: 0;
                }
                
        
                @media (prefers-reduced-motion: reduce) {
                    .marquee { transform: translateX(0) !important; }
                }
        
                header {
                    position: fixed;
                    inset: var(--bar-height) 0 auto 0;
                    padding: var(--content-margin);
                    z-index: 100;
                    background: transparent;
                    font-size: 18px !important;
                }
                
                .grid-wrp {
                    position: relative;
                    display: grid;
                    align-items: start;
                    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
                    grid-auto-rows: auto; 
                    width: 100%;
                }
        
                .grid-wrp > * {
                    padding-left: var(--dot-size);
                    box-sizing: border-box;
                }
        
                .header-content {
                    display: flex;
                    align-items: flex-start;
                    gap: 4px;
                    flex-direction: column;
                }
                .header-content a { color: #000; font-weight: 500; }
                .header-content img {
                    display: block;
                    width: 48px;
                    height: auto;
                    transform: none !important;
                    filter:invert(0);
                }
                .header-content p { margin: 0; line-height: 1.2; font-size:18px;}
                
                .grid-wrp > .header-content:last-child {
                    position: absolute;
                    right: 0;
                    text-align: right;
                    padding-right: var(--dot-size);
                }
        
                .page-wrapper {
                    position: relative;
                    padding-top: 42px;
                    min-height: 100vh;
                }
                .section-title {
                    position: sticky;
                    top: var(--grid-cell);
                    z-index: 10;
                    height: 100px;
                    margin: var(--grid-cell) var(--content-margin) 0 calc(var(--dot-size) + var(--content-margin));
                }
                .main-grid {
                    display: grid;
                    grid-template-columns: repeat(var(--grid-columns), 1fr);
                    grid-auto-rows: var(--grid-cell); /* ここで1行の高さを固定 */
                    padding: 0 var(--content-margin);
                    row-gap: 0; 
                    margin:0 auto;
                }
        
                .main-grid.is-first-grid {
            margin-top: calc(-1 * var(--grid-cell) - 100px);
        }
        
                .main-grid > * {
                    padding-top: var(--dot-size);
                    padding-left: var(--dot-size);
                    padding-right: 0;
                    padding-bottom: 0;
                    box-sizing: border-box;
                }
                lottie-player {
    position: absolute;
    width: calc(var(--grid-cell) * 3);
    height: calc(var(--grid-cell) * 3);
    z-index: 2;
    top: var(--grid-cell);
    left: var(--grid-cell);
    padding: 5% !important;
}

        footer {
            padding-bottom: 0; 
            position: relative;
            width: 100%;
            margin-top: var(--grid-cell);
        }

        .footer-visual {
            grid-column: 2 / 5;
            grid-row: 1 / span 3;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            position: relative;
            margin-bottom: 40px;
        }
        .footer-visual img {
            width: 80%;
            height: auto;
            object-fit: contain;
            transform: none !important;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0;
            padding: 20px calc(var(--content-margin) + var(--dot-size)) 20px;
            box-sizing: border-box;
            border-top: 1px solid #000;
            font-size: 16px;
            line-height: 1.5;
            font-weight: 500;
            background-color: var(--color-bg);
            background-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
            background-size: 9px 10px; background-repeat: no-repeat; background-origin: border-box;
            background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0;
            width:100%;
            font-size:16px;
        }
        dotlottie-player{
        grid-column: 2 / 5;
    grid-row: 2 / span 3;
    position: relative;
    z-index: 1;
    padding: 5%;
        }
        .copy { text-align: left; width: 300px; }
        .address { text-align: center; flex-grow: 1; line-height:1.2;}
        .social { text-align: right; width: 300px; display: flex; justify-content: flex-end; gap: 16px; }
        .social a { transition: opacity 0.3s; }
        .social a:hover { opacity: 0.6; }

        /* メインフッター（JS制御などで表示切り替え用？） */
footer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    z-index: 0; /* 背面に配置 */
    flex-direction: column;
    margin-top:0
}


.footer-img {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
    margin-top: calc(var(--grid-cell));
}

.footer-img img{
    width:55%;
}
@media (min-width: 1024px) {
    .pcHidden{
        display:none;
    }
}

@media (max-width: 1023px) {
    .footer-bottom{
        display: grid;
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
    }
    .copy {
        grid-row: 2;
        font-size:14px;
        width:fit-content;
    }
    .address {
        text-align: center;
        grid-row: 1;
        grid-column: 1 / -1;
        font-size:14px;
    }
    .social {
        grid-row: 2;
        text-align: right;
        font-size:14px;
        display: flex;
  gap: 12px;          /* アイコン間の余白（お好み） */
  flex-wrap: nowrap; /* ← 改行させない */
  white-space: nowrap;
  width:fit-content;
  justify-self: end;
    }
.footer-img img {
    width: 120%;
    margin-bottom: 36px;
    max-width: 120%;
    margin-top:30vh;
}
.footer-img {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
}
}

/* デフォルトではSP用を隠す */
.spHeader, .sp-nav { display: none; }

@media (max-width: 1023px) {
    .transparent.is-active .sp-logo {
        filter: invert(0);
    }
    .transparent .sp-logo {
        filter: invert(1);
    }
    /* PC用を消す */
    .pcHeader { display: none !important; }

    /* SPヘッダー固定 */
    .spHeader {
        display: block;
        position: fixed;
        top: var(--bar-height);
        left: 0;
        width: 100vw;
        height: 60px;
        background: transparent;
        z-index: 1001;
        padding: 0 var(--content-margin) 0 calc( var(--content-margin) + 2px);
    }

    .spHeader-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }

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

    .sp-menu-trigger {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        position: relative;
        z-index: 2002;
    }
    .sp-menu-trigger .icon-close { fill:white; }
    /* SVGアイコンの切り替え制御 */
    .sp-menu-trigger .icon-close { display: none; }
    .sp-menu-trigger.is-active .icon-open { display: none; }
    .sp-menu-trigger.is-active .icon-close { display: block; fill:#000;}

    .sp-menu-trigger rect {
        fill: #000; /* 閉じるアイコンだけ青くする、など */
    }
    .sp-menu-trigger.is-active .icon-close rect{
        fill: #000;
    }


    /* オーバーレイメニュー本体 */
    .sp-nav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 0;
        background: #fff;
        z-index: 1000;
        padding: 0;
        overflow-y: auto;
    }
    .sp-nav.is-active {
        height:100dvh;
        max-height: 100dvh; 
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    }

    /* メニュー内のタイポグラフィ (スクショ再現) */
    .sp-nav-section {
        margin-bottom: 15px;
    }

    .sp-nav-label {
        margin-bottom: 4px;
        line-height: 1;
        font-size:32px;
        letter-spacing: -0.03rem;
    }

    .sp-nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        line-height: 1;
    }

    .sp-nav-links a {
        font-size: 16px;
        white-space: nowrap;
        line-height: 1;
    }
    .sp-menu-trigger {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 80px;  /* クリック領域を広めに確保 */
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 100; /* メニュー(2001)より上に配置 */
        outline: none;
        -webkit-tap-highlight-color: transparent; /* タップ時の青い枠を消す */
    }

    /* SVG自体のサイズと色 */
    .sp-menu-trigger svg {
        width: 70px; /* 共有いただいたwidthに合わせる */
        height: auto;
        display: block;
        transition: transform 0.3s ease; /* 少し動きを滑らかに */
    }

    /* 閉じるボタン（X）を中央で綺麗に交差させるための調整 */
    /* 15度はかなり鋭角なので、もし角度が足りなければここでも微調整可能 */
    .icon-close svg {
        transform-origin: center;
    }

    /* ホバー時やアクティブ時の視認性向上（オプション） */
    .sp-menu-trigger:active {
        opacity: 0.6;
    }
    nav footer{
        position: relative;
    }
    nav .footer-bottom {
        background: white;
        background-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
    background-size: 9px 10px;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0;
    }
    
    .spHeader.is-active{
        mix-blend-mode: initial;
    }
    .sp-nav-inner {
        padding-top: 150px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: var(--content-margin);
        margin-left: var(--content-margin);
        margin-bottom:140px;
    }

}