@charset "utf-8";

/* ==========================================
   RESET
========================================== */
*,
*::before,
*::after {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

html,
body {
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    overflow-x:clip;
}

body {
    min-width:320px;
    color:#221815;
    background:#fff100;
    font-family:"YakuHanJP", "Noto Sans JP", sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
}

img {
    display:block;
    max-width:100%;
    height:auto;
}

a {
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea,
select {
    font:inherit;
}

button {
    color:inherit;
}

p,
h1,
h2,
h3 {
    margin:0;
}

/* ==========================================
   VARIABLES
========================================== */
:root {
    --yellow:#fff100;
    --pink:#e50058;
    --orange:#f18b00;
    --green:#00a346;
    --blue:#006cba;
    --black:#221815;
    --white:#fff;
    --ease:cubic-bezier(.22,.72,.17,1);
}

/* ==========================================
   DISPLAY
========================================== */
.pc {
    display:block;
}

.sp {
    display:none;
}

.br-pc {
    display:inline;
}

.br-sp {
    display:none;
}

.nowrap {
    white-space: nowrap;
}

/* ==========================================
   UTILITY
========================================== */
body.is-menu-open {
    overflow:hidden;
}

.js-inview,
.js-program-item {
    opacity:0;
    translate:0 32px;
    transition:
        opacity .75s var(--ease),
        translate .75s var(--ease),
        scale .75s var(--ease);
}

.js-inview.is-show {
    opacity:1;
    translate:0 0;
}

/* ==========================================
   GLOBAL NAVIGATION
   PC / SP 共通ハンバーガー
========================================== */
.globalNav {
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    width:100%;
    height:86px;
    padding:16px 24px;
    pointer-events:none;
}

.globalNav__logo,
.globalNav__menu {
    z-index:3;
    pointer-events:auto;
}

.globalNav__logo {
    position:absolute;
    top:16px;
    left:24px;
    display:block;
    width:54px;
    transition:
        opacity .35s ease,
        transform .35s var(--ease),
        visibility .35s;
}

.globalNav__logo img {
    display:block;
    width:100%;
    height:auto;
}

/* TOPだけHERO通過前はロゴを隠す */
.globalNav--home .globalNav__logo {
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
}

body.is-past-hero .globalNav--home .globalNav__logo {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* ハンバーガー：spanの本数に依存せず自動で等間隔 */
.globalNav__menu {
    position:absolute;
    top:16px;
    right:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:58px;
    height:58px;
    padding:0;
    border:0;
    background:var(--black);
    border-radius:43% 57% 48% 52% / 52% 44% 56% 48%;
    transform:rotate(-4deg);
    transition:
        transform .65s cubic-bezier(.16,1,.3,1),
        border-radius .65s cubic-bezier(.16,1,.3,1),
        box-shadow .45s ease;
    cursor:pointer;
}

.globalNav__menu:hover {
    transform:rotate(3deg) scale(1.06);
    border-radius:55% 45% 58% 42% / 44% 56% 46% 54%;
}

.globalNav__menu span {
    position:relative;
    display:block;
    flex:0 0 auto;
    width:27px;
    height:3px;
    margin:0;
    background:var(--yellow);
    border-radius:999px;
    transform:scaleX(1);
    transform-origin:center;
    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        opacity .3s ease;
}

/* OPEN時の×。spanの本数に依存させない */
.globalNav__menu::before,
.globalNav__menu::after {
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:27px;
    height:3px;
    background:var(--yellow);
    border-radius:999px;
    opacity:0;
    transform:translate(-50%,-50%) rotate(0deg) scaleX(0);
    transform-origin:center;
    transition:
        transform .55s cubic-bezier(.16,1,.3,1),
        opacity .25s ease;
    pointer-events:none;
}

.globalNav__panel {
    position:fixed;
    z-index:1;
    inset:0;
    display:flex;
    align-items:center;
    overflow-y:auto;
    background:var(--black);
    clip-path:circle(0 at calc(100% - 53px) 45px);
    visibility:hidden;
    pointer-events:none;
    transition:
        clip-path .85s cubic-bezier(.16,1,.3,1),
        visibility 0s .85s;
}

.globalNav__links {
    width:min(1120px,82vw);
    margin:auto;
    padding:76px 0 48px;
    color:var(--yellow);
}

/* メインリンク */
.globalNav__mainLink {
    display:flex;
    align-items:baseline;
    gap:18px;
    width:100%;
    padding:17px 0 19px;
    border-bottom:1px solid rgba(255,241,0,.28);
    color:var(--yellow);
    font-size:clamp(38px,5.6vw,82px);
    line-height:.95;
    font-weight:900;
    letter-spacing:-.045em;
    opacity:0;
    transform:translateX(-34px) rotate(-2deg);
    transition:
        opacity .45s ease,
        transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay:0s;
}

.globalNav__mainLink--about {
    padding-left:5vw;
}

.globalNav__mainLink--program {
    padding-left:1.5vw;
}

.globalNav__mainLink--special {
    padding-left:7vw;
}

.globalNav__mainLink small {
    font-size:11px;
    line-height:1;
    letter-spacing:.12em;
}

/* PROGRAM */
.globalNav__program {
    position:relative;
}

.globalNav__programHead {
    position:relative;
}

.globalNav__programHead .globalNav__mainLink {
    padding-right:78px;
}

.globalNav__programToggle {
    position:absolute;
    z-index:2;
    top:50%;
    right:4px;
    width:56px;
    height:56px;
    padding:0;
    border:1px solid rgba(255,241,0,.45);
    border-radius:50%;
    background:transparent;
    transform:translateY(-50%) rotate(-4deg);
    cursor:pointer;
    transition:
        background .3s ease,
        transform .45s cubic-bezier(.16,1,.3,1),
        border-radius .45s cubic-bezier(.16,1,.3,1);
}

.globalNav__programToggle:hover {
    background:rgba(255,241,0,.10);
    transform:translateY(-50%) rotate(4deg) scale(1.05);
    border-radius:43% 57% 48% 52% / 57% 45% 55% 43%;
}

.globalNav__programToggle span {
    position:absolute;
    left:50%;
    top:50%;
    display:block;
    width:22px;
    height:3px;
    background:var(--yellow);
    border-radius:999px;
    transition:transform .45s cubic-bezier(.16,1,.3,1);
}

.globalNav__programToggle span:first-child {
    transform:translate(-50%,-50%);
}

.globalNav__programToggle span:last-child {
    transform:translate(-50%,-50%) rotate(90deg);
}

.globalNav__program.is-open .globalNav__programToggle span:last-child {
    transform:translate(-50%,-50%) rotate(0deg);
}

.globalNav__programSub {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 28px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    padding:0 4vw 0 6vw;
    transition:
        max-height .65s cubic-bezier(.16,1,.3,1),
        opacity .35s ease,
        padding .65s cubic-bezier(.16,1,.3,1);
}

.globalNav__program.is-open .globalNav__programSub {
    max-height:220px;
    opacity:1;
    padding-top:20px;
    padding-bottom:22px;
}

.globalNav__programSub a {
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:start;
    gap:10px;
    min-width:0;
    padding:13px 0 15px;
    border-top:1px solid rgba(255,241,0,.18);
    color:var(--yellow);
    opacity:.82;
    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.16,1,.3,1);
}

.globalNav__programSub a:hover {
    opacity:1;
    transform:translateX(5px);
}

.globalNav__programSub b {
    font-size:12px;
    line-height:1.55;
    font-weight:900;
    letter-spacing:.06em;
}

.globalNav__programSub a span {
    font-size:13px;
    line-height:1.55;
    font-weight:700;
}

/* MENU OPEN */
.globalNav.is-menu-open {
    pointer-events:auto;
}

.globalNav.is-menu-open .globalNav__panel {
    clip-path:circle(150vmax at calc(100% - 53px) 45px);
    visibility:visible;
    pointer-events:auto;
    transition:
        clip-path .85s cubic-bezier(.16,1,.3,1),
        visibility 0s;
}

.globalNav.is-menu-open .globalNav__menu {
    border-radius:57% 43% 46% 54% / 42% 56% 44% 58%;
    transform:rotate(4deg) scale(1.04);
    box-shadow:0 0 0 2px var(--yellow);
}

.globalNav.is-menu-open .globalNav__menu span {
    opacity:0;
    transform:scaleX(0);
}

.globalNav.is-menu-open .globalNav__menu::before {
    opacity:1;
    transform:translate(-50%,-50%) rotate(45deg) scaleX(1);
}

.globalNav.is-menu-open .globalNav__menu::after {
    opacity:1;
    transform:translate(-50%,-50%) rotate(-45deg) scaleX(1);
}

.globalNav.is-menu-open .globalNav__mainLink {
    opacity:1;
    transform:translateX(0) rotate(0deg);
    transition-delay:calc(.22s + var(--nav-index, 0) * .07s);
}

/* 下層は旧subHeader分の高さを確保 */
body.subPage {
    padding-top:90px;
}

/* ==========================================
   TABLET / SP
========================================== */
@media (max-width:900px) {
    .pc {
        display:none;
    }

    .sp {
        display:block;
    }

    .br-pc {
        display:none;
    }

    .br-sp {
        display:inline;
    }

    .globalNav {
        height:80px;
        padding:0;
        overflow:visible;
    }

    .globalNav__logo {
        top:14px;
        left:16px;
        width:46px;
    }

    /* TOPのSPでは従来どおりヘッダーロゴを出さない */
    .globalNav--home .globalNav__logo,
    body.is-past-hero .globalNav--home .globalNav__logo {
        display:none;
    }

    /* viewport基準で固定。回転しても見切れない */
    .globalNav__menu {
        position:fixed;
        z-index:3;
        top:14px;
        right:14px;
        gap:3px;
        width:52px;
        height:52px;
        -webkit-appearance:none;
        appearance:none;
    }

    .globalNav__menu span,
    .globalNav__menu::before,
    .globalNav__menu::after {
        width:24px;
    }

    /* ボタン中心と開閉円の中心を合わせる */
    .globalNav__panel {
        inset:0;
        width:100%;
        height:100vh;
        height:100dvh;
        min-height:100svh;
        align-items:flex-start;
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        padding-top:0;
        padding-bottom:env(safe-area-inset-bottom);
        clip-path:circle(0 at calc(100% - 40px) 40px);
    }

    .globalNav.is-menu-open .globalNav__panel {
        clip-path:circle(150vmax at calc(100% - 40px) 40px);
    }

    .globalNav__links {
        width:82vw;
        margin:0 auto;
        padding:
            calc(88px + env(safe-area-inset-top))
            0
            calc(54px + env(safe-area-inset-bottom));
    }

    .globalNav__mainLink {
        gap:12px;
        padding:15px 0 16px;
        font-size:clamp(32px,9.8vw,48px);
    }

    .globalNav__mainLink--about {
        padding-left:4vw;
    }

    .globalNav__mainLink--program {
        padding-left:0;
    }

    .globalNav__mainLink--special {
        padding-left:6vw;
    }

    .globalNav__programHead .globalNav__mainLink {
        padding-right:62px;
    }

    .globalNav__programToggle {
        right:0;
        width:46px;
        height:46px;
    }

    .globalNav__programToggle span {
        width:18px;
        height:2px;
    }

    .globalNav__programSub {
        grid-template-columns:1fr;
        gap:0;
        padding-left:5vw;
        padding-right:0;
    }

    .globalNav__program.is-open .globalNav__programSub {
        max-height:310px;
        padding-top:10px;
        padding-bottom:14px;
    }

    .globalNav__programSub a {
        padding:10px 0 11px;
    }

    .globalNav__programSub a span {
        font-size:12px;
    }

    body.subPage {
        padding-top:74px;
    }
}