/* =========================================================
   tORu GLOBAL HEADER
   /assets/toru-header.css
========================================================= */

#toru-global-header {
    --toru-paper: #f7f6f1;
    --toru-ink: #171716;
    --toru-indigo: #18334a;
    --toru-line: #d9d7cf;

    --toru-sans:
        "Noto Sans JP",
        "Hiragino Kaku Gothic ProN",
        "Yu Gothic",
        sans-serif;

    --toru-serif:
        "Noto Serif JP",
        "Yu Mincho",
        serif;

    --toru-ease:
        cubic-bezier(.23, 1, .32, 1);

    position: sticky;
    z-index: 9999;

    top: 0;

    width: 100%;

    border-top:
        2px solid var(--toru-indigo);

    border-bottom:
        1px solid var(--toru-line);

    background:
        rgb(247 246 241 / 96%);

    color:
        var(--toru-ink);

    font-family:
        var(--toru-sans);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


#toru-global-header * {
    box-sizing: border-box;
}


#toru-global-header a {
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   SHELL
========================================================= */

#toru-global-header
.toru-header-shell {
    display: flex;
    align-items: center;

    width:
        min(1380px, calc(100% - 56px));

    min-height: 94px;

    margin: 0 auto;
}


/* =========================================================
   BRAND
========================================================= */

#toru-global-header
.toru-brand {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 15px;

    min-width: 230px;
}


#toru-global-header
.toru-brand img {
    display: block;

    width: 52px;
    height: 52px;

    object-fit: contain;
}


#toru-global-header
.toru-brand-lockup {
    display: grid;

    gap: 1px;
}


#toru-global-header
.toru-brand-word {
    font-family:
        var(--toru-serif);

    font-size: 29px;
    font-weight: 600;

    line-height: 1.05;

    letter-spacing: .18em;
}


#toru-global-header
.toru-brand-descriptor {
    color:
        var(--toru-indigo);

    font-size: 7.5px;
    font-weight: 700;

    line-height: 1.5;

    letter-spacing: .17em;

    white-space: nowrap;
}


/* =========================================================
   NAVIGATION
========================================================= */

#toru-global-header
.toru-main-nav {
    display: flex;
    align-items: stretch;

    gap:
        clamp(10px, 1.25vw, 22px);

    margin-left: auto;
}


#toru-global-header
.toru-main-nav > a {
    position: relative;

    display: grid;
    align-content: center;

    min-height: 60px;

    padding:
        9px 0;

    font-weight: 600;

    white-space: nowrap;
}


#toru-global-header
.toru-nav-ja {
    display: block;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.25;

    letter-spacing: .075em;
}


#toru-global-header
.toru-nav-en {
    display: block;

    margin-top: 4px;

    color:
        var(--toru-indigo);

    font-size: 7.5px;
    font-weight: 700;

    line-height: 1.15;

    letter-spacing: .13em;
}


/* =========================================================
   STANDARD NAV HOVER
========================================================= */

#toru-global-header
.toru-main-nav > a:not(.toru-nav-join)::after {
    position: absolute;

    right: 0;
    bottom: 4px;
    left: 0;

    width: 0;
    height: 2px;

    background:
        var(--toru-indigo);

    content: "";

    transition:
        width 180ms var(--toru-ease);
}


#toru-global-header
.toru-main-nav > a:not(.toru-nav-join):hover::after,
#toru-global-header
.toru-main-nav > a:not(.toru-nav-join):focus-visible::after {
    width: 100%;
}


/* =========================================================
   JOIN
========================================================= */

#toru-global-header
.toru-nav-join {
    position: relative;

    display: grid !important;
    align-content: center;

    min-width: 134px;

    margin-left: 5px;

    padding:
        12px 36px
        12px 17px !important;

    border:
        1px solid var(--toru-indigo);

    background:
        var(--toru-indigo);

    color:
        #fff !important;

    transition:
        background 180ms var(--toru-ease),
        color 180ms var(--toru-ease),
        transform 160ms var(--toru-ease);
}


#toru-global-header
.toru-nav-join
.toru-nav-en {
    color:
        rgb(255 255 255 / 70%);
}


#toru-global-header
.toru-nav-join b {
    position: absolute;

    right: 15px;
    bottom: 18px;

    font-size: 15px;
    font-weight: 400;

    transition:
        transform 180ms var(--toru-ease);
}


#toru-global-header
.toru-nav-join:hover,
#toru-global-header
.toru-nav-join:focus-visible {
    background:
        transparent;

    color:
        var(--toru-indigo) !important;
}


#toru-global-header
.toru-nav-join:hover
.toru-nav-en,
#toru-global-header
.toru-nav-join:focus-visible
.toru-nav-en {
    color:
        var(--toru-indigo);
}


#toru-global-header
.toru-nav-join:hover b,
#toru-global-header
.toru-nav-join:focus-visible b {
    transform:
        translateX(4px);
}


#toru-global-header
.toru-nav-join:active {
    transform:
        scale(.97);
}


/* =========================================================
   MENU TOGGLE
========================================================= */

#toru-global-header
.toru-menu-toggle {
    display: none;

    border: 0;

    background:
        transparent;

    color:
        var(--toru-ink);

    font: inherit;

    cursor: pointer;
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width: 1180px) {

    #toru-global-header
    .toru-header-shell {
        width:
            calc(100% - 40px);
    }


    #toru-global-header
    .toru-brand {
        min-width: 205px;

        gap: 12px;
    }


    #toru-global-header
    .toru-brand img {
        width: 46px;
        height: 46px;
    }


    #toru-global-header
    .toru-brand-word {
        font-size: 25px;
    }


    #toru-global-header
    .toru-main-nav {
        gap: 10px;
    }


    #toru-global-header
    .toru-nav-ja {
        font-size: 11px;
    }


    #toru-global-header
    .toru-nav-en {
        font-size: 7px;
    }


    #toru-global-header
    .toru-nav-join {
        min-width: 122px;

        padding-left: 14px !important;
    }

}


/* =========================================================
   TABLET / MOBILE NAV
========================================================= */

@media (max-width: 980px) {

    #toru-global-header
    .toru-header-shell {
        position: relative;

        width:
            min(100% - 40px, 720px);

        min-height: 76px;
    }


    /* BRAND */

    #toru-global-header
    .toru-brand {
        gap: 12px;

        min-width: auto;
    }


    #toru-global-header
    .toru-brand img {
        width: 42px;
        height: 42px;
    }


    #toru-global-header
    .toru-brand-word {
        font-size: 23px;
    }


    #toru-global-header
    .toru-brand-descriptor {
        font-size: 7px;
    }


    /* TOGGLE */

    #toru-global-header
    .toru-menu-toggle {
        display: inline-flex;
        align-items: center;

        gap: 12px;

        margin-left: auto;

        padding:
            10px 0
            10px 16px;
    }


    #toru-global-header
    .toru-menu-toggle-label {
        font-size: 10px;
        font-weight: 600;

        letter-spacing: .16em;
    }


    #toru-global-header
    .toru-menu-icon {
        display: grid;

        gap: 5px;

        width: 19px;
    }


    #toru-global-header
    .toru-menu-icon i {
        display: block;

        width: 19px;
        height: 1px;

        background:
            currentColor;

        transition:
            transform 180ms var(--toru-ease);
    }


    #toru-global-header
    .toru-menu-toggle[aria-expanded="true"]
    .toru-menu-icon i:first-child {
        transform:
            translateY(3px)
            rotate(45deg);
    }


    #toru-global-header
    .toru-menu-toggle[aria-expanded="true"]
    .toru-menu-icon i:last-child {
        transform:
            translateY(-3px)
            rotate(-45deg);
    }


    /* NAV PANEL */

    #toru-global-header
    .toru-main-nav {
        position: absolute;

        top: 100%;
        right: 0;
        left: 0;

        display: grid;

        gap: 0;

        max-height: 0;

        margin: 0;

        overflow: hidden;

        border-bottom:
            1px solid transparent;

        background:
            var(--toru-paper);

        opacity: 0;

        visibility: hidden;

        transition:
            max-height 320ms var(--toru-ease),
            opacity 180ms var(--toru-ease),
            border-color 180ms var(--toru-ease),
            visibility 0s linear 320ms;
    }


    #toru-global-header
    .toru-main-nav.is-open {
        max-height:
            calc(100vh - 76px);

        overflow-y: auto;

        border-bottom-color:
            var(--toru-line);

        opacity: 1;

        visibility: visible;

        transition:
            max-height 320ms var(--toru-ease),
            opacity 180ms var(--toru-ease),
            border-color 180ms var(--toru-ease),
            visibility 0s;
    }


    /* NAV LINKS */

    #toru-global-header
    .toru-main-nav > a {
        width:
            min(100% - 40px, 720px);

        min-height: auto;

        margin: 0 auto;

        padding:
            14px 0;

        border-bottom:
            1px solid var(--toru-line);
    }


    #toru-global-header
    .toru-main-nav > a:not(.toru-nav-join)::after {
        display: none;
    }


    #toru-global-header
    .toru-nav-ja {
        font-size: 13px;
    }


    #toru-global-header
    .toru-nav-en {
        font-size: 7.5px;
    }


    #toru-global-header
    .toru-main-nav > a:last-child {
        border-bottom: 0;
    }


    /* JOIN */

    #toru-global-header
    .toru-nav-join {
        display: grid !important;
        justify-content: start;

        width:
            min(100% - 40px, 720px) !important;

        min-width: 0;

        margin:
            16px auto
            24px !important;

        padding:
            15px 42px
            15px 16px !important;

        border-bottom:
            1px solid var(--toru-indigo) !important;
    }


    #toru-global-header
    .toru-nav-join b {
        right: 16px;
        bottom: 18px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #toru-global-header
    .toru-header-shell {
        width:
            calc(100% - 32px);

        min-height: 72px;
    }


    #toru-global-header
    .toru-brand {
        gap: 9px;

        min-width: 0;
    }


    #toru-global-header
    .toru-brand img {
        width: 38px;
        height: 38px;
    }


    #toru-global-header
    .toru-brand-lockup {
        gap: 0;

        min-width: 0;
    }


    #toru-global-header
    .toru-brand-word {
        font-size: 20px;

        line-height: 1;

        letter-spacing: .15em;
    }


    #toru-global-header
    .toru-brand-descriptor {
        font-size: 6.5px;

        line-height: 1.35;

        letter-spacing: .12em;
    }


    #toru-global-header
    .toru-menu-toggle {
        gap: 9px;

        padding-left: 12px;
    }


    #toru-global-header
    .toru-menu-toggle-label {
        font-size: 9px;

        letter-spacing: .14em;
    }


    #toru-global-header
    .toru-menu-icon,
    #toru-global-header
    .toru-menu-icon i {
        width: 18px;
    }


    #toru-global-header
    .toru-main-nav.is-open {
        max-height:
            calc(100vh - 72px);
    }


    #toru-global-header
    .toru-main-nav > a {
        width:
            calc(100% - 32px);

        padding:
            13px 0;
    }


    #toru-global-header
    .toru-nav-ja {
        font-size: 13px;
    }


    #toru-global-header
    .toru-nav-join {
        width:
            calc(100% - 32px) !important;
    }

}


/* =========================================================
   FOCUS
========================================================= */

#toru-global-header
a:focus-visible,
#toru-global-header
button:focus-visible {
    outline:
        1px solid var(--toru-indigo);

    outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #toru-global-header *,
    #toru-global-header *::before,
    #toru-global-header *::after {
        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}

/* =========================================================
   tORu GLOBAL HEADER
   LINK COLOR FIX

   WordPress / Divi リンクカラー上書き対策
========================================================= */


/* ========================================
   BRAND
======================================== */

#toru-global-header .toru-brand,
#toru-global-header .toru-brand:link,
#toru-global-header .toru-brand:visited {

    color: var(--toru-ink) !important;

    text-decoration: none !important;

}


/* ブランドの英語表記 */

#toru-global-header
.toru-brand-descriptor {

    color: var(--toru-indigo) !important;

}


/* ========================================
   MAIN NAVIGATION
======================================== */

/* 通常リンク */

#toru-global-header
.toru-main-nav > a:not(.toru-nav-join),

#toru-global-header
.toru-main-nav > a:not(.toru-nav-join):link,

#toru-global-header
.toru-main-nav > a:not(.toru-nav-join):visited {

    color: var(--toru-ink) !important;

    text-decoration: none !important;

}


/* 日本語ナビゲーション */

#toru-global-header
.toru-main-nav > a:not(.toru-nav-join)
.toru-nav-ja {

    color: var(--toru-ink) !important;

}


/* 英語ナビゲーション */

#toru-global-header
.toru-main-nav > a:not(.toru-nav-join)
.toru-nav-en {

    color: var(--toru-indigo) !important;

}


/* ========================================
   JOIN BUTTON
======================================== */

/* 通常時 */

#toru-global-header
.toru-main-nav > a.toru-nav-join,

#toru-global-header
.toru-main-nav > a.toru-nav-join:link,

#toru-global-header
.toru-main-nav > a.toru-nav-join:visited {

    color: #ffffff !important;

    text-decoration: none !important;

}


/* ボタン内の日本語 */

#toru-global-header
.toru-nav-join
.toru-nav-ja {

    color: inherit !important;

}


/* ボタン内の英語 */

#toru-global-header
.toru-nav-join
.toru-nav-en {

    color: rgb(255 255 255 / 70%) !important;

}


/* ========================================
   JOIN BUTTON HOVER
======================================== */

#toru-global-header
.toru-main-nav > a.toru-nav-join:hover,

#toru-global-header
.toru-main-nav > a.toru-nav-join:focus-visible {

    color: var(--toru-indigo) !important;

}


/* ホバー時の英語 */

#toru-global-header
.toru-nav-join:hover
.toru-nav-en,

#toru-global-header
.toru-nav-join:focus-visible
.toru-nav-en {

    color: var(--toru-indigo) !important;

}

/* =========================================================
   tORu GLOBAL HEADER
   LOGIN / MY PAGE
========================================================= */

/* 未ログイン時：マイページを非表示 */
body:not(.logged-in) #toru-global-header
.toru-nav-account--mypage {
  display: none !important;
}

/* ログイン済み：ログインを非表示 */
body.logged-in #toru-global-header
.toru-nav-account--login {
  display: none !important;
}

/* アカウントリンクは通常メニューと同じ構造を維持 */
#toru-global-header .toru-nav-account {
  box-sizing: border-box;
}