/* --- Variables & Base --- */
:root {
    --nara-red: #b03020;
    --bg-cream: #f8f7f2;
    --bg-beige: #f2f0e9;
    --text-main: #333;
    --white: #ffffff;
    --radius-l: 40px;
    --radius-m: 20px;
}

body {
    font-family: 'Noto Serif JP', serif;
    color: var(--text-main);
    line-height: 2;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

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

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 25px;
    position: relative;
}

/* --- Header --- */
.site-header {
    background: var(--bg-cream) url('images/washi-texture.png');
    border-bottom: 2px solid var(--nara-red);
    padding: 15px 0;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.main-logo {
    height: 70px;
}

.header-nav ul {
    display: flex;
    gap: 45px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav a {
    text-decoration: none;
    color: #1a2a3a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-nav a img {
    width: 40px;
}

.nav-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.nav-text .en {
    font-size: 1.1rem;
    font-weight: 500;
}

.nav-text .jp {
    font-size: 0.65rem;
}

/* SP メニュー */

/* --- PC版の基本形 --- */
.hamburger {
    display: none; /* PCでは隠す */
}

/* --- スマホ版（768px以下） --- */
@media (max-width: 768px) {
    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    /* ハンバーガーボタンのデザイン */
    .hamburger {
        display: block;
        position: relative;
        z-index: 100;
        width: 30px;
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
    }

    .hamburger span {
        display: block;
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: all 0.3s;
    }

    .hamburger span:nth-child(1) { top: 0; }
    .hamburger span:nth-child(2) { top: 11px; }
    .hamburger span:nth-child(3) { bottom: 0; }

    /* ボタンが押された時（×印） */
    .hamburger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .hamburger.is-active span:nth-child(2) { opacity: 0; }
    .hamburger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

    /* メニュー本体（右からスライドイン） */
    .header-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 最初は隠す */
        width: 80%;    /* メニューの幅 */
        height: 100vh;
        background-color: #fff;
        z-index: 90;
        transition: all 0.5s;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        padding-top: 80px; /* ボタンと重ならないよう隙間を空ける */
    }

    .header-nav.is-open {
        right: 0; /* 表示 */
    }

    /* メニュー内のリストを縦並びに */
    .header-nav ul {
        display: flex;
        flex-direction: column;
        padding: 0;
    }

    .header-nav li {
        border-bottom: 1px solid #eee;
    }

    .header-nav li a {
        display: flex;
        align-items: center;
        padding: 20px;
        text-decoration: none;
        color: #333;
    }

    .nav-icon {
        width: 30px;
        margin-right: 15px;
    }

    .nav-text .en {
        display: block;
        font-size: 0.8rem;
        color: #b03a2e;
    }

    .nav-text .jp {
        display: block;
        font-size: 0.9rem;
        font-weight: bold;
    }
}

/* bodyここから */
/* キービジュアルここから */

/* =====================================
   About KV 全体の背景設定
===================================== */
.about-kv {
    /* 赤背景と左側の和柄を重ねて指定 */
    background-color: #b03a2e;
    background-image: url('../images/wagara-left.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: auto 100%;
    /* 高さいっぱいに和柄を表示 */
    padding: 60px 0 80px;
}

.about-kv-container {
    max-width: 1200px;
    margin: 0 auto;
    /* 和柄に文字が被らないよう、左側の余白を大きく取るのがポイント */
    padding: 0 40px 0 12%;
}



/* =====================================
   上段：スライダーとロゴの高さ合わせ
===================================== */
.kv-top-row {
    display: flex;
    align-items: stretch;
    /* ★これで左右の高さがピッタリ揃います */
    gap: 30px;
    margin-bottom: 40px;
}

/* --- 左側：スライダー --- */
.kv-slider-area {
    flex: 2.2;
    /* スライダーを広く */
    min-width: 0;
    /* Swiper崩れ防止 */
    display: flex;
    flex-direction: column;
    /* パジネーションを画像の下に配置するため */
}

.about-kv-swiper {
    flex-grow: 1;
    /* ★親の高さに合わせてスライダー本体を伸ばす */
    width: 100%;
    border-radius: 30px;
    overflow: hidden;
}

.about-kv-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像が歪まないように切り抜く */
    display: block;
}

/* パジネーション（白い丸） */
.about-kv-pagination {
    position: static !important;
    /* 画像の外に配置 */
    text-align: right !important;
    padding-top: 15px;
}

.about-kv-pagination .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: transparent !important;
    border: 1px solid #fff !important;
    opacity: 1 !important;
    margin: 0 5px !important;
}

.about-kv-pagination .swiper-pagination-bullet-active {
    background: #fff !important;
}

/* --- 右側：白いロゴボックス --- */
.kv-logo-area {
    flex: 1;
}

.logo-box {
    background-color: #fff;
    border-radius: 30px;
    height: 100%;
    /* 親(stretch)に合わせて高さを出す */
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.logo-box img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* =====================================
   下段：イラストとテキスト
===================================== */
.kv-bottom-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

.kv-illust-area {
    flex: 0.8;
    text-align: center;
}

.illust-img {
    width: 100%;
    height: auto;
}

.kv-text-area {
    flex: 2;
    color: #fff;
}

.kv-title {
    font-size: 1.8rem;
    font-weight: normal;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
}

.kv-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: justify;
}

/* =====================================
   スマホ版設定（768px以下）
===================================== */
@media (max-width: 768px) {
    .about-kv {
        /* 背景画像をスマホ用に調整（必要に応じて） */
        background-size: auto 50%; 
        padding: 40px 0;
    }

    .about-kv-container {
        /* 左側の大きな余白を解除し、左右均等に */
        padding: 0 20px;
    }

    /* --- 上段の並び替え：ロゴを上に、スライダーを下に --- */
    .kv-top-row {
        flex-direction: column-reverse; /* 子要素の順番を逆転（ロゴが上になる） */
        gap: 20px;
        margin-bottom: 30px;
    }

    /* ロゴエリアの調整 */
    .kv-logo-area {
        width: 100%;
    }

    .logo-box {
        height: auto;
        aspect-ratio: 1 / 1; /* 正方形にするか、お好みの高さに調整 */
        max-width: 200px;    /* ロゴが大きすぎないように制限 */
        margin: 0 auto;      /* 中央寄せ */
    }

    /* スライダーエリアの調整 */
    .kv-slider-area {
        width: 100%;
    }

    .about-kv-swiper {
        /* スマホで高さを自動 stretch できないため、比率を指定 */
        aspect-ratio: 16 / 9; 
        height: auto;
    }

    /* パジネーションを中央寄せに */
    .about-kv-pagination {
        text-align: center !important;
    }

    /* --- 下段の調整 --- */
    .kv-bottom-row {
        flex-direction: column;
        gap: 20px;
    }

    /* イラストを非表示にする */
    .kv-illust-area {
        display: none; 
    }

    /* テキストエリアの調整 */
    .kv-text-area {
        width: 100%;
        text-align: center; /* スマホでは中央寄せが綺麗です（左寄せなら削除してください） */
    }

    .kv-title {
        font-size: 1.4rem; /* 文字サイズをスマホ向けに縮小 */
        line-height: 1.4;
        margin-bottom: 15px;
    }

    .kv-desc {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}


/* --- 横並び画像 --- */
.visual-full-grid {
    border-top: 3px solid var(--nara-red);
}

.grid-row {
    display: flex;
}

.grid-col {
    flex: 1;
    height: 350px;
    overflow: hidden;
}

.grid-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* コンセプト（和紙背景） */
.about-concept {
    background-color: #f8f4f0;
    /* 和紙のような薄いベージュ */
    padding: 100px 0;
    overflow: hidden;
}

/* 行の基本レイアウト */
.concept-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 80px;
    gap: 60px;
}

/* 2行目は左右反転 */
.concept-row.reverse {
    flex-direction: row-reverse;
}

/* スライダー側 */
.concept-img-side {
    flex: 1.2;
    min-width: 0;
}

.js-about-concept-1,
.js-about-concept-2 {
    width: 100%;
    overflow: hidden;
}

/* コンセプト01（上段）はそのまま横長 */
.js-about-concept-1 .swiper-slide {
    aspect-ratio: 3 / 2;
}

/* ★コンセプト02（下段）縦長 */
.js-about-concept-2 .swiper-slide {
    aspect-ratio: 2 / 3;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.js-about-concept-2 .swiper-slide img {
    width: 100%;
    height: 100%;
    /* 縦長の枠に合わせて中央を切り抜き */
    object-fit: cover;
}

.concept-row.reverse .concept-img-side {
    flex: 0.8;
}

.swiper-slide img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 15px;
}

/* テキスト側 */
.concept-txt-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* ★子要素（タイトルと説明文）を横方向の中央に寄せます */
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 縦書きタイトル部分 */
.v-title-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    /* 縦書きの中身を中央へ */
    width: 100%;
    /* 親の幅いっぱいに使って中央を探す */
    margin-bottom: 30px;
}

.v-title {
    writing-mode: vertical-rl;
    /* ★縦書き */
    font-size: 1.3rem;
    line-height: 1.8;
    letter-spacing: 0.3em;
    height: 350px;
    /* タイトルの高さに合わせて調整 */
    margin: center;
    /* 中央に寄せる */
}

.concept-row.reverse .v-title {
    margin: center;
    /* 中央に寄せる */
}

/* 横書き説明文 */
.h-desc {
    font-size: 0.9rem;
    line-height: 2;
    margin-top: 30px;
    text-align: justify;
}

/* --- イラストの配置 --- */
.illust-deer-pair {
    position: absolute;
    bottom: 0;
    right: -20px;
    width: 120px;
}

.illust-deer-head {
    position: absolute;
    bottom: 0;
    left: -10px;
    width: 130px;
}

/* 飾り線 */
.concept-divider {
    text-align: center;
    margin: -50px 0 50px;
}

.concept-divider img {
    width: 50%;
    max-width: 300px;
}

/* パジネーション共通 */
.about-concept .swiper-pagination {
    position: relative !important;
    text-align: right !important;
    bottom: 0 !important;
    margin-top: 15px;
}

.about-concept .swiper-pagination-bullet {
    background: transparent !important;
    border: 1px solid #333 !important;
    opacity: 1 !important;
}

.about-concept .swiper-pagination-bullet-active {
    background: #333 !important;
}

/* =============================================
   コンセプトセクション：スマホ対応 (768px以下)
   ============================================= */
@media (max-width: 768px) {
    /* 1. 全体レイアウト：縦並びに統一 */
    .concept-row, 
    .concept-row.reverse {
        flex-direction: column; /* 画像が上、テキストが下になる */
        gap: 30px;
        margin-bottom: 60px;
    }

    /* 2. 各サイドの幅を100%に */
    .concept-img-side,
    .concept-row.reverse .concept-img-side,
    .concept-txt-side {
        flex: none;
        width: 100%;
        padding: 0;
    }

    /* 3. 画像の比率を整える（お好みで） */
    /* 縦長だったコンセプト2の画像も、スマホでは見やすく少し横幅を持たせます */
    .js-about-concept-2 .swiper-slide {
        aspect-ratio: 4 / 5; /* 縦長感を残しつつ、画面に収まりやすく */
    }

    /* 4. イラスト（鹿）を非表示にする */
    .illust-deer-pair,
    .illust-deer-head {
        display: none !important;
    }

    /* 5. タイトルを横書きに変更 */
    .v-title-wrap {
        margin-bottom: 10px;
    }

    .v-title {
        writing-mode: horizontal-tb; /* 横書きに変更 */
        height: auto;                /* 縦書き用の高さを解除 */
        font-size: 1.4rem;
        line-height: 1.4;
        text-align: center;
        letter-spacing: 0.1em;       /* 横書きに合わせて間隔を少し詰める */
    }

    /* 6. 文章の調整 */
    .h-desc {
        margin-top: 10px;
        text-align: justify;         /* 文章は両端揃えで読みやすく */
        font-size: 0.9rem;
    }

    /* 7. 飾り線（波）の調整 */
    .concept-divider {
        margin: 20px 0 40px;
    }
}

/* 直営店ここから */
.red-store-section {
    background: var(--nara-red);
    padding: 80px 0 100px;
    color: #fff;
    position: relative;
}

.center-title {
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 30px;
    letter-spacing: 0.3em;
}

.store-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.collage-box {
    width: 300px;
}

.interior-box {
    flex: 1;
    max-width: 650px;
}

.interior-box img {
    border-radius: var(--radius-l);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* =============================================
   直営店セクション：スマホ対応 (768px以下)
   ============================================= */
@media (max-width: 768px) {
    .red-store-section {
        padding: 60px 0 80px; /* 上下の余白を少し詰める */
    }

    .center-title {
        font-size: 1.5rem;   /* タイトルを少し小さく */
        margin-bottom: 40px;
    }

    /* 1. 横並びを縦並びに変更 */
    .store-flex {
        flex-direction: column; 
        gap: 40px;           /* ロゴと画像の間の隙間 */
    }

    /* 2. ロゴボックスの調整 */
    .collage-box {
        width: 70%;          /* スマホの画面幅に合わせたサイズ */
        max-width: 250px;    /* 大きくなりすぎないように制限 */
        margin: 0 auto;      /* 中央寄せ */
    }

    /* 3. 店舗画像ボックスの調整 */
    .interior-box {
        width: 100%;
        max-width: 100%;     /* PC版の650px制限を解除 */
        padding: 0 10px;     /* 画像が画面端に触れないよう微調整 */
    }

    .interior-box img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* 直営店ここまで */

/* 店内イメージ */
/* ショップ体験セクション */
.about-shop-experience {
    background-color: #fff;
    /* 白背景 */
    padding: 120px 0;
}

.shop-exp-row {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

/* 左側スライダー */
.shop-exp-img {
    flex: 1.5;
    /* 画像側を広めに */
    min-width: 0;
}

.js-shop-slider {
    width: 100%;
    overflow: hidden;
}

.js-shop-slider .swiper-slide img {
    width: 100%;
    aspect-ratio: 3 / 2;
    /* スクリーンショットに近い横長比率 */
    object-fit: cover;
    border-radius: 20px;
}

/* スライダー下のパジネーション */
.about-shop-experience .swiper-pagination {
    position: relative !important;
    text-align: right !important;
    bottom: 0 !important;
    margin-top: 20px;
}

.about-shop-experience .swiper-pagination-bullet {
    background: transparent !important;
    border: 1px solid #333 !important;
    opacity: 1 !important;
}

.about-shop-experience .swiper-pagination-bullet-active {
    background: #333 !important;
}

/* 右側テキストエリア */
.shop-exp-txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* タイトルと説明文を中央揃えに */
}

/* 縦書きタイトル */
.shop-exp-txt .v-title-wrap {
    margin-bottom: 60px;
    /* 説明文との間隔 */
}

.shop-exp-txt .v-title {
    writing-mode: vertical-rl;
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.3em;
    height: auto;
    max-height: 350px;
}

/* 横書き説明文 */
.shop-exp-txt .h-desc-wrap {
    max-width: 380px;
    /* 説明文の幅を絞って綺麗に中央配置 */
}

.shop-exp-txt .h-desc {
    font-size: 0.95rem;
    line-height: 2;
    text-align: justify;
}

@media (max-width: 768px) {
    .about-shop-experience {
        padding: 60px 0 80px; /* 上下の余白をスマホ向けに調整 */
    }

    /* 1. レイアウトの順番を逆転（テキストを上に、画像を下に） */
    .shop-exp-row {
        flex-direction: column-reverse; 
        gap: 40px;
    }

    /* 2. テキストエリアの調整 */
    .shop-exp-txt {
        width: 100%;
        padding: 0 20px;
    }

    /* タイトルを横書きに戻す */
    .shop-exp-txt .v-title {
        writing-mode: horizontal-tb !important; 
        height: auto !important;
        max-height: none !important;
        font-size: 1.5rem;
        text-align: center;
        letter-spacing: 0.1em;
        margin-bottom: 20px;
    }

    /* 文章の幅制限を解除 */
    .shop-exp-txt .h-desc-wrap {
        max-width: 100% !important;
    }

    .shop-exp-txt .h-desc {
        font-size: 0.9rem;
        text-align: justify;
    }

    /* 3. スライダーエリアの調整 */
    .shop-exp-img {
        width: 100%;
        padding: 0 10px;
    }

    .js-shop-slider .swiper-slide img {
        aspect-ratio: 16 / 9; /* スマホで見やすい比率に調整 */
    }

    /* パジネーションを中央寄せに */
    .about-shop-experience .swiper-pagination {
        text-align: center !important;
        margin-top: 15px;
    }
}

/* footerここから */
/* 
.main-footer {
    background-image: url('washi-texture.jpg');
    padding-top: 80px;
    position: relative;
    overflow: hidden;
} */

/* --- ビジュアルエリア（段違い画像） --- */
.footer-visual {
    max-width: 1200px;
    margin: 0 auto 60px;
    position: relative;
}

.visual-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: flex-start;
}

.visual-item {
    flex: 1;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    /* 縦横比を固定 */
    overflow: hidden;
    border-radius: 15px;
}

.visual-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 段違いの調整 */
.item1 {
    margin-top: 0;
}

.item2 {
    margin-top: 80px;
}

.item3 {
    margin-top: 160px;
}

.item4 {
    margin-top: 240px;
}

/* 装飾アイコンの配置 */
.deco-line {
    position: absolute;
    top: 80px;
    right: 5%;
    width: 300px;
}

.deco-kumo-top {
    position: absolute;
    top: 180px;
    right: 2%;
    width: 100px;
}

.deco-kumo-left {
    position: absolute;
    bottom: 100px;
    left: 0;
    width: 150px;
}

/* --- ロゴ＆ナビゲーション --- */
/* .main-footer {
    background-image: url('washi-texture.jpg');
    padding: 100px 0 0;
} */

/* 全体を中央に寄せるための大きな箱 */
.footer-container {
    max-width: 1000px;
    /* 画像4枚が綺麗に収まる幅 */
    margin: 0 auto;
    /* これで全体が中央へ */
    padding: 0 40px;
    /* 左右の余白 */
    position: relative;
}

/* --- 画像エリア --- */
.footer-visual {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

.visual-item {
    width: 23%;
    /* 4枚並べるためのサイズ */
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    overflow: hidden;
}

/* 段違いの調整（スクリーンショット通りに） */
.item1 {
    margin-top: 0;
}

.item2 {
    margin-top: 100px;
}

.item3 {
    margin-top: 150px;
}

.item4 {
    margin-top: 250px;
}

/* --- ロゴとナビを左に揃えるブロック --- */
.footer-content-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ★これでロゴとナビが左に揃う */
    /* 1枚目の画像の下あたりに配置されるように調整 */
    margin-top: -100px;
    /* 画像の段違いに合わせて位置を上げる */
    padding-bottom: 100px;
}

.footer-logo img {
    width: 250px;
    margin-bottom: 40px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 60px;
    list-style: none;
    padding: 0;
}

.nav-grid li a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

/* ナビのテキストサイズ微調整 */
.nav-text .en {
    font-size: 1.1rem;
    color: #333;
}

.nav-text .jp {
    font-size: 0.65rem;
    color: #999;
}

/* 赤いバー */
.footer-bottom-bar {
    background-color: #b03a2e;
    padding: 15px 0;
    text-align: center;
}

.footer-bottom-bar p,
.footer-bottom-bar a {
    color: #ffffff !important;
    /* 強制的に白を指定 */
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    /* リンクの下線を消す */
    margin: 0;
}

/* リンクにマウスを乗せた時の演出（任意） */
.footer-bottom-bar a:hover {
    text-decoration: underline;
    /* ホバー時だけ下線を出す */
    opacity: 0.8;
}

@media (max-width: 768px) {
    /* 1. 4枚の写真エリアを非表示 */
    .footer-visual {
        display: none !important;
    }

    /* 2. コンテンツ全体を中央寄せ */
    .footer-content-block {
        padding: 40px 15px; /* 左右に少し余裕を持たせる */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 3. ロゴの調整 */
    .footer-logo {
        margin-bottom: 40px;
        width: 100%;
    }

    .footer-logo img {
        max-width: 160px; /* スマホ向けに少しサイズ調整 */
        height: auto;
        margin: 0 auto;
    }

    /* 4. ナビボタンを横に並べつつ中央に寄せる */
    .footer-nav {
        width: 100%;
    }

    .nav-grid {
        display: flex;
        flex-wrap: wrap;       /* ★重要：幅が足りない時に自動で2段にする */
        justify-content: center; /* ★重要：中身を横方向の中央に寄せる */
        align-items: flex-start;
        gap: 20px 15px;        /* 縦20px、横15pxの隙間 */
        padding: 0;
        list-style: none;
        max-width: 500px;      /* 横に広がりすぎないように制限 */
        margin: 0 auto;        /* 親要素の中で中央に配置 */
    }

    .nav-grid li a {
        display: flex;
        flex-direction: column; /* アイコンが上、文字が下 */
        align-items: center;
        text-decoration: none;
        width: 80px;            /* ★各ボタンの幅を揃えると中央が安定します */
    }

    /* アイコン（マーク）のサイズ調整 */
    .nav-grid li a img {
        width: 45px;            /* マークが重ならないよう少し小さめに */
        height: auto;
        margin-bottom: 8px;
    }

    /* テキスト部分の調整 */
    .nav-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav-text .en {
        font-size: 0.9rem;
        font-weight: bold;
        line-height: 1.2;
    }

    .nav-text .jp {
        font-size: 0.65rem;
        color: #888;
        white-space: nowrap;    /* 日本語が勝手に改行されないように */
    }
}
/* footerここまで */