@charset "UTF-8";
/*
 * ヘッダーナビ：ホバーで日本語 ⇄ 英語を入れ替える
 *
 * マークアップ（.text01=日本語 / .text02=英語）とGSAPの
 * スライド演出は既存のものをそのまま使う。
 *
 * 既存CSSでは .text02 が position:absolute で .text01 に
 * 重なっているだけだったため、文言を変えると常時2重表示になる。
 * ここでグリッドで重ね、初期位置を下に逃がし、上下をマスクする。
 */

/* 2つのテキストを同じマスに重ねる。
   絶対配置ではなくグリッドにすることで、
   親の幅が「日本語と英語の広い方」になり英字が切れない。 */
.header-nav-link > p {
    position: relative;
    display: grid;
    overflow: hidden;
}

.header-nav-link > p > .text01,
.header-nav-link > p > .text02 {
    grid-area: 1 / 1;
    position: static;
    white-space: nowrap;
}

/* 英語は初期状態でマスクの下に隠しておく */
.header-nav-link > p > .text02 {
    transform: translateY(100%);
}

/* 英字はサイト共通の欧文書体で、やや字間を空ける */
.header-nav-link > p > .text02 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* JSが動かない環境では入れ替えが起きないため、英語は出さない */
.no-js .header-nav-link > p > .text02 {
    display: none;
}