@charset "UTF-8";
/*
    Template: swell
    Theme Name: 大谷歯科クリニック
    Theme URI: https://swell-theme.com/
    Description: 大谷歯科クリニック
    Version: 1.0.0
    Author: 
    Author URI: 

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 親要素（メニューのリンク）の設定 */
.menu-item a {
    position: relative; /* 英語の配置基準にする */
    display: flex;      /* 中央揃えしやすくする */
    justify-content: center;
    align-items: center;
    overflow: hidden;   /* はみ出した文字を隠す */
}

/* 日本語の設定 */
.jp {
    display: block;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 英語の設定（初期状態） */
.en {
    display: block;
    opacity: 0;
    position: absolute; /* 日本語と重ねる */
    top: 50%;
    left: 50%;
    width: 100%;       /* 横幅を確保して中央に */
    transform: translate(-50%, calc(-50% + 10px)); /* 真ん中かつ少し下 */
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-align: center;
}

/* マウスオーバー時の設定 */
.menu-item a:hover .jp {
    opacity: 0;
    transform: translateY(-10px); /* 上に消える */
}

.menu-item a:hover .en {
    opacity: 1;
    /* 真ん中ピッタリに戻す（右ズレ防止） */
    transform: translate(-50%, -50%); 
}

/* スマホ表示の調整（横並びにする場合） */
@media screen and (max-width: 959px) {
    .menu-item a {
        display: block;
        overflow: visible;
    }
    .jp {
        display: inline;
        opacity: 1 !important;
        transform: none !important;
    }
    .en {
        position: static;
        display: inline;
        opacity: 1 !important;
        transform: none !important;
        padding-left: 5px; /* 日本語との間隔 */
    }
    .en::before {
        content: "(";
    }
    .en::after {
        content: ")";
    }
	span.en {
    display: none;
}
}