/* =====================================================================
   TABLET-ONLY refinements (768px – 1199px)
   ---------------------------------------------------------------------
   The site locks the whole 1440px design to the viewport via
   `html { font-size: 1.111vw }` above 767px (see fluid-responsive.css).
   On tablet widths this shrinks every rem-based size, so body text drops
   to ~8.5px at 768px and ~11px at 1000px — too small / unbalanced.

   This file ONLY targets the 768–1199px band. It never affects:
     - PC  (>= 1200px) : untouched, keeps 1.111vw vector scaling
     - SP  (< 768px)   : untouched, keeps the mobile layout
   The curve below lands on exactly the PC value (13.33px) at 1200px so
   the boundary stays seamless, while lifting readability on smaller
   tablets. Because the layout columns are fluid (fr/%/vw), only type and
   rem-spacing scale up — the structure is preserved.
   ===================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    /* Readable proportional scale:
       768px -> ~12px, 1000px -> ~12.7px, 1200px -> 13.33px (= PC value) */
    html {
        font-size: calc(9.63px + 0.3086vw) !important;
    }

    /* ---------------------------------------------------------
       Tablet Header: ナビゲーションを表示しつつ、
       画面幅が狭くなっても重ならないよう動的にスケール
       PC (1200px以上) および スマホ (< 768px) には一切影響しません
       --------------------------------------------------------- */
    .header-inner {
        padding-left: var(--side-margin) !important;
        padding-right: var(--side-margin) !important;
    }

    .logo {
        font-size: clamp(20px, 2.6vw, 28px) !important;
        letter-spacing: 0.25em !important;
        transform: translateX(calc(var(--side-margin) * -0.5)) !important;
    }

    .nav-menu {
        display: flex !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        gap: clamp(12px, 2.8vw, 36px) !important;
    }

    .nav-menu .nav-item {
        font-size: clamp(10px, 1.1vw, 12.5px) !important;
        letter-spacing: clamp(0.08em, 0.15vw, 0.18em) !important;
    }

    .header-actions {
        display: flex !important;
        gap: clamp(12px, 2vw, 28px) !important;
        margin-left: auto !important;
    }

    .lang-switch-header {
        display: flex !important;
        font-size: clamp(9px, 0.9vw, 10.5px) !important;
        letter-spacing: 0.1em !important;
    }

    .menu-toggle {
        display: flex !important;
        width: clamp(24px, 2.8vw, 32px) !important;
        height: clamp(24px, 2.8vw, 32px) !important;
    }

    /* Tablet only: stack the hero into one column with the visual above
       the copy (order: visual 0, copy 1). */
    .hero-showcase {
        grid-template-columns: 1fr !important;
        gap: clamp(2.5rem, 4vw, 4rem) !important;
        align-items: start !important;
        padding-bottom: clamp(4.5rem, 8.5vh, 6rem) !important;
    }

    .hero-showcase-visual {
        order: 1 !important;
        top: 0 !important;
        margin-top: 0 !important;
        width: 70% !important;
        max-width: 70% !important;
        justify-self: start !important;
        justify-content: start !important;
        margin-left: 0 !important;
        transform: translateX(calc(var(--side-margin) * -0.5)) translateY(var(--hero-visual-image-offset, 0px)) !important;
    }

    .hero-showcase-copy {
        order: 0 !important;
        align-self: flex-start !important;
        top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ---------------------------------------------------------
       Tablet Footer: エディトリアルで洗練されたナビゲーションデザイン（完全中央配置）
       --------------------------------------------------------- */
    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .footer-brand {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .footer-title {
        text-align: center !important;
    }

    .footer-nav {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(1.5rem, 3vw, 3rem) !important;
        padding: clamp(2rem, 3.5vh, 3rem) 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        width: 100% !important;
        max-width: 860px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        justify-items: center !important;
    }

    .footer-nav-col {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .footer-nav-col h4 {
        font-family: var(--font-en) !important;
        font-size: 0.68rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.26em !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.4) !important;
        margin-bottom: clamp(1rem, 1.8vh, 1.4rem) !important;
        position: relative !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .footer-nav-col h4::after {
        content: "" !important;
        display: block !important;
        width: 1.2rem !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        margin-top: 0.5rem !important;
    }

    .footer-nav-col ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: clamp(0.6rem, 1vh, 0.85rem) !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }

    .footer-nav-col li {
        margin: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .footer-nav-col a {
        font-family: var(--font-en) !important;
        font-size: clamp(0.88rem, 1.1vw, 1.02rem) !important;
        font-weight: 300 !important;
        letter-spacing: 0.08em !important;
        line-height: 1.4 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        text-decoration: none !important;
        transition: color 0.3s ease, letter-spacing 0.3s ease !important;
        display: inline-block !important;
        text-align: center !important;
    }

    .footer-nav-col a:hover {
        color: #ffffff !important;
        letter-spacing: 0.14em !important;
        transform: none !important;
    }

    .footer-address {
        font-family: var(--font-jp) !important;
        font-size: clamp(0.76rem, 0.9vw, 0.84rem) !important;
        font-weight: 300 !important;
        line-height: 2 !important;
        letter-spacing: 0.08em !important;
        color: rgba(255, 255, 255, 0.7) !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* ---------------------------------------------------------
       Tablet Loop Slider: バックの写真が下部に余白を作らず
       全画面を確実に埋めるよう調整
       --------------------------------------------------------- */
    .loop-slider-section {
        overflow: clip !important;
    }

    .loop-slider-sticky {
        min-height: 100vh !important;
        height: 100vh !important;
    }

    .loop-project {
        height: 100% !important;
    }

    .loop-project img {
        top: -20vh !important;
        height: 140vh !important;
        object-fit: cover !important;
    }

    /* ---------------------------------------------------------
       Tablet AboutUs Kinetic Text:
       iPad mini (768px〜) や iPad Air (820px〜) でも
       iPad Pro (1024px〜) と同じタイトルサイズ・レイアウトに統一
       --------------------------------------------------------- */
    .aboutus-kinetic {
        --g-margin: calc(var(--g-gap) * 4) !important;
        font-size: 20px !important;
    }

    .aboutus-kinetic .row {
        height: calc(var(--vw, 1vw) * 200) !important;
        margin-bottom: calc(var(--vw, 1vw) * -90) !important;
    }

    .aboutus-kinetic .row-4 {
        margin-bottom: initial !important;
    }

    .aboutus-kinetic .row>div {
        top: calc(var(--vh, 1vh) * 25) !important;
        translate: 0 var(--h5) !important;
    }

    .aboutus-kinetic .row>div>span {
        margin-right: calc(clamp(20px, 8.33vw, 160px) - var(--g-margin)) !important;
    }

    .aboutus-kinetic .row>div>span .-s-char:not(:last-child) {
        margin-right: 1.0em !important;
    }

    .aboutus-kinetic .row>div>span .-s-char::after {
        font-size: calc(var(--fit-font-size, 1) * 1px * (var(--fit-scale-y) * 0.9)) !important;
        scale: calc(1 / (var(--fit-scale-y) * 0.9)) min(var(--after-char-t), 0.9375) !important;
    }

    .aboutus-kinetic .sun,
    .aboutus-kinetic .balloon,
    .aboutus-kinetic .cloud,
    .aboutus-kinetic .fly {
        width: 25% !important;
    }
}