@charset "utf-8";

/* ------------------------------------------
   Minimal Reset & Box Sizing
------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

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

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

ul, ol {
    list-style: none;
}

/* ------------------------------------------
   LP 全体設定
------------------------------------------ */
:root {
    --color-bg-body: #f9f7ed;
    --color-bg-shop: #cdd7a7;
    --color-bg-floor: #ebe6c3;
    --color-bg-green: #9baf50;
    --color-text: #464646;
    --font-ja: "Zen Kaku Gothic New";
    --font-en: "Lato";
    
    /* 幅設定 */
    --site-width: 900px;   /* コンテンツ基本幅 */
    --wide-width: 1320px;  /* ヘッダー・フッター・スライド用 */
    --shop-width: 1080px;  /* SHOPセクション用 */
    
    --header-height: 100px;
    /* SP用フッターバーの高さ */
    --sp-bar-height: 50px;

    /* フォントサイズ定義 */
    --font-size-base: 14px;
    --font-size-menu: 14px;
    --font-size-sec-title: 36px;
    --font-size-sec-sub: 18px;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-en), var(--font-ja), sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg-body);
    line-height: 1.6;
    padding-top: var(--header-height);
    font-size: var(--font-size-base);
}

/* 1000px以下でSP用のパディング設定 */
@media (max-width: 1000px) {
    body { 
        padding-top: 60px; 
        padding-bottom: var(--sp-bar-height); 
    }
}

/* ------------------------------------------
   コンテンツ幅の制御 (Padding方式)
------------------------------------------ */
/* 1. 基本コンテンツ (NEWS, ACCESS, HOWTO, バナー) */
.inner, .news-container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    /* 900px + 40px(左右余白) = 940px */
    max-width: calc(var(--site-width) + 40px); 
}

/* 2. ワイドコンテンツ (Header, Footer, MV, Map) */
.header-inner, .footer-inner, .mv-swiper, .floor-map-wrapper {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    /* 1320px + 40px = 1360px */
    max-width: calc(var(--wide-width) + 40px);
}

/* 3. SHOPセクション */
.sec-shop .inner {
    /* 1080px + 40px = 1120px */
    max-width: calc(var(--shop-width) + 40px);
}

/* 4. GALLERYセクション (全幅・余白なし) */
.gallery-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* ------------------------------------------
   共通スタイル
------------------------------------------ */
section { padding: 80px 0; }

.sec-title {
    font-family: var(--font-en), var(--font-ja), sans-serif;
    font-size: var(--font-size-sec-title);
    font-weight: 700;
    text-align: center;
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.sec-sub {
    text-align: center;
    font-size: var(--font-size-sec-sub);
    margin-bottom: 40px;
    font-weight: bold;
    color: var(--color-text);
}

@media (max-width: 767px) {
    .sec-title { font-size: 28px; margin-bottom: 30px; }
    .sec-sub { font-size: 15px; margin-bottom: 30px; }
    section { padding: 50px 0; }
}

/* 1000pxを境に表示切り替え */
.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 1000px) {
    .pc-only { display: none !important; }
    .sp-only { display: block; }
}

/* ------------------------------------------
   ヘッダー
------------------------------------------ */
.lp-header {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: var(--header-height);
    background-color: var(--color-bg-body);
    z-index: 1000;
    box-shadow: none; 
    display: flex; align-items: center; justify-content: center;
    transition: box-shadow 0.3s ease;
}

.lp-header.is-scrolled {
    background-color: var(--color-bg-body);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

/* 1000px以下ではロゴを強制的に中央へ */
@media (max-width: 1000px) {
    .header-inner {
        justify-content: center !important;
    }
    .lp-header { height: 60px; }
    .header-logo img { width: 160px; }
}

.header-logo {
    margin: 0; line-height: 1; height: 100%;
    display: flex; align-items: center;
}
.header-logo a { display: flex; align-items: center; height: 100%; }
.header-logo img { width: 210px; height: auto; }

.header-right {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 30px;
}

.header-nav { height: 100%; display: flex; align-items: center; }
.header-nav ul {
    display: flex; list-style: none;
    margin: 0; padding: 0; gap: 25px;
    height: 100%; align-items: center;
}
.header-nav li { display: flex; align-items: center; height: 100%; }
.header-nav a {
    text-decoration: none; color: var(--color-text);
    font-size: var(--font-size-menu);
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: color 0.3s;
    font-family: var(--font-en), var(--font-ja), sans-serif;
    display: flex; align-items: center; height: 100%;
}
.header-nav a:hover { color: #CBA55B; }

.header-actions { display: flex; align-items: center; gap: 20px; height: 100%; }

/* 食べログボタン (PC) */
.btn-tabelog { 
    display: flex; 
    align-items: center; 
    height: 40px; 
    background-color: #fff;
    border: 1px solid #CBA55B; 
    border-radius: 20px; 
    padding: 0 40px; 
    box-sizing: border-box;
    transition: opacity 0.3s;
    text-decoration: none;
}
.btn-tabelog img { width: auto; height: 22px; transition: opacity 0.3s; }
.btn-tabelog:hover { opacity: 0.7; }

/* インスタアイコン */
.icon-insta { display: flex; align-items: center; height: 100%; }
.icon-insta img { height: 45px; width: auto; transition: opacity 0.3s; }
.icon-insta:hover img { opacity: 0.7; }

/* ------------------------------------------
   SP用 固定フッターバー
------------------------------------------ */
.sp-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--sp-bar-height);
    z-index: 9999;
    display: none; 
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    background-color: #9baf50; 
}

@media (max-width: 1000px) {
    .sp-bottom-bar { display: flex; }
}

.sp-bar-tabelog {
    flex: 0 0 162px; width: 162px;
    background-color: #fff; display: flex; align-items: center; justify-content: center;
    border: 1px solid #CBA55B; box-sizing: border-box; border-radius: 0; 
}
.sp-bar-tabelog img { height: 25px; width: auto; }

.sp-bar-access {
    flex: 1; background-color: #9baf50; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-en); font-weight: bold; font-size: 16px; letter-spacing: 0.05em;
    border-left: 1px solid #fff; border-right: 1px solid #fff; box-sizing: border-box;
}

.sp-bar-menu {
    width: 50px; background-color: #9baf50;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; position: relative; padding: 0; border: none; 
}
.sp-bar-menu span {
    position: absolute; left: 15px; width: 20px; height: 2px;
    background: #fff; transition: all 0.3s;
}
.sp-bar-menu span:nth-child(1) { top: 16px; }
.sp-bar-menu span:nth-child(2) { top: 24px; }
.sp-bar-menu span:nth-child(3) { top: 32px; }

.sp-bar-menu.active span:nth-child(1) { top: 24px; transform: rotate(45deg); }
.sp-bar-menu.active span:nth-child(2) { opacity: 0; }
.sp-bar-menu.active span:nth-child(3) { top: 24px; transform: rotate(-45deg); }


/* ------------------------------------------
   SP用 ドロワーメニュー
------------------------------------------ */
.drawer-menu {
    position: fixed; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100vh;
    background: rgba(155, 175, 80, 0.8); 
    z-index: 10000; 
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.drawer-menu.active { opacity: 1; visibility: visible; }

/* 閉じるボタン */
.drawer-close {
    position: absolute; bottom: 0; right: 0;
    width: 50px; height: 50px;
    background: #9baf50; border: none; border-left: 1px solid #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 10010;
}
.drawer-close span {
    position: absolute; left: 15px; width: 20px; height: 2px; background: #fff;
}
.drawer-close span:nth-child(1) { transform: rotate(45deg); }
.drawer-close span:nth-child(2) { transform: rotate(-45deg); }

.drawer-nav { width: 100%; max-width: 190px; }
.drawer-nav ul { list-style: none; padding: 0; margin: 0 0 60px 0; text-align: left; }
.drawer-nav li { margin-bottom: 25px; }
.drawer-nav a {
    font-size: 22px; font-weight: bold; text-decoration: none; color: #fff; 
    font-family: var(--font-en); letter-spacing: 0.1em; text-transform: uppercase;
}

.drawer-actions { display: flex; align-items: center; justify-content: center; gap: 30px; }
.drawer-btn-tabelog {
    width: 134px; height: 30px; background: #fff; border-radius: 15px; padding: 0;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: none;
}
.drawer-btn-tabelog img { width: 84px; height: auto; }
.drawer-icon-insta { display: flex; align-items: center; }
.drawer-icon-insta img { width: 30px; height: 30px; filter: brightness(0) invert(1); }


/* メインビジュアル */
.mv-section { width: 100%; padding: 0; }
.mv-swiper { /* 幅制御は上の共通設定 */ }
.mv-swiper .swiper-slide img { width: 100%; height: auto; border-radius: 10px; display: block; }

/* CONCEPT (ブランドリスト) */
.sec-concept { padding: 80px 0; text-align: center; }
.concept-lead { margin-bottom: 50px; }
.concept-lead p { font-size: 28px; font-weight: 700; line-height: 1.6; color: var(--color-text); margin: 0; }
.brand-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; margin: 0 auto; }
.brand-item { width: 120px; height: auto; display: flex; align-items: center; justify-content: center; }
.brand-item img { width: 100%; height: auto; }
@media (max-width: 767px) {
    .sec-concept { padding: 60px 0; }
    .concept-lead p { font-size: 20px; margin-bottom: 30px; }
    .brand-list { gap: 9px; }
    .brand-item { width: 77px; }
}

/* NEWS (スライドショー) */
.sec-news { background-color: var(--color-bg-body); padding: 80px 0 90px 0; }
.sec-news .sec-title { margin-bottom: 30px; }
.news-container { position: relative; }
.news-swiper { width: 100%; padding: 0; }
.news-swiper .swiper-slide { width: 222px; height: auto; margin-right: 3px; transition: opacity 0.3s; }
@media (max-width: 767px) {
    .news-swiper .swiper-slide { opacity: 0.2; }
    .news-swiper .swiper-slide-active { opacity: 1; }
}
.news-card {
    width: 222px; height: 256px; background-color: #fff;
    border-radius: 10px; padding: 20px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: flex-start; position: relative;
}
.news-photo {
    width: 182px; height: 102px; border-radius: 10px; background-color: #afafaf;
    margin-bottom: 10px; display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.news-photo img { width: 100%; height: 100%; object-fit: cover; }
.dummy-photo-text { font-size: 12px; color: #333; font-weight: bold; font-family: var(--font-en); letter-spacing: 0.05em; }
.news-body { width: 100%; flex-grow: 1; position: relative; }
.news-date { font-size: 9px; color: var(--color-text); display: block; margin-bottom: 5px; line-height: 1; font-family: var(--font-en); }
.news-title { font-size: 14px; font-weight: normal; line-height: 1.4; margin: 0 0 8px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-desc { font-size: 11px; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.news-button-prev, .news-button-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: auto; height: 40px; z-index: 10; cursor: pointer; display: block; 
}
.news-button-prev img, .news-button-next img { height: 40px; width: auto; }
.news-button-prev { left: calc(50% - 480px); }
.news-button-next { right: calc(50% - 480px); }
@media (max-width: 960px) { .news-button-prev { left: 10px; } .news-button-next { right: 10px; } }
/* GALLERY (スライドショー) */
.sec-gallery { padding: 0 0 80px 0; overflow: hidden; }
.gallery-container { position: relative; width: 100%; max-width: 100%; padding: 0; margin: 0; }
.gallery-swiper { width: 100%; padding: 0; }
.gallery-swiper .swiper-slide {
    width: 297px; height: auto; opacity: 0.2; transition: opacity 0.3s ease;
    border-radius: 20px; overflow: hidden;
}
.gallery-swiper .swiper-slide img { width: 100%; height: auto; object-fit: cover; vertical-align: bottom; }
.gallery-swiper .swiper-slide-active, .gallery-swiper .swiper-slide-next, .gallery-swiper .swiper-slide-prev { opacity: 1; }
@media (max-width: 767px) {
    .gallery-swiper .swiper-slide-next, .gallery-swiper .swiper-slide-prev { opacity: 0.2; }
}
.gallery-button-prev, .gallery-button-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: auto; height: 40px; z-index: 10; cursor: pointer; display: block;
}
.gallery-button-prev img, .gallery-button-next img { height: 40px; width: auto; }
.gallery-button-prev { left: calc(50% - 480px); }
.gallery-button-next { right: calc(50% - 480px); }
@media (max-width: 960px) { .gallery-button-prev { left: 10px; } .gallery-button-next { right: 10px; } }

/* SHOP INFO */
.sec-shop { background-color: var(--color-bg-shop); overflow: hidden; }
.shop-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px; justify-content: center; position: relative; z-index: 1; }
.shop-list::before {
    content: ""; position: absolute; left: -130px; bottom: 130px; width: 174px; height: 188px;
    background-image: url(../images/shopinfo_leaf_left.png); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: -1;
}
.shop-list::after {
    content: ""; position: absolute; right: -120px; bottom: 540px; width: 134px; height: 134px;
    background-image: url(../images/shopinfo_leaf_right.png); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: -1;
}
.shop-card {
    width: 340px;
    height: 427px;
    background: #fff; border-radius: 10px; padding: 20px;
    box-sizing: border-box; display: flex; flex-direction: column; align-items: center; margin: 0 auto;
}
.shop-photo { 
    width: 300px;
    height: 227px;
    margin-bottom: 15px; flex-shrink: 0; 
}
.shop-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.shop-info-area { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0; }
.shop-logo { width: 100px; height: 100px; flex-shrink: 0; }
.shop-logo img { width: 100%; height: 100%; object-fit: contain; }
.shop-text { flex-grow: 1; padding-left: 15px; text-align: left; }
.shop-cat { font-size: 11px; display: block; margin-bottom: 5px; color: var(--color-text); text-align: left; }
.shop-name { font-size: 20px; font-weight: 400; line-height: 1.3; margin: 0; letter-spacing: normal; text-align: left; }
.shop-button {
    display: flex; align-items: center; justify-content: center;
    width: 150px; height: 30px; background-color: #9baf50; color: #fff;
    font-size: 12px; font-weight: 400; text-decoration: none; border-radius: 15px;
    transition: opacity 0.3s; font-family: var(--font-en); align-self: flex-start; 
}
.shop-button:hover { opacity: 0.8; }
@media (max-width: 1140px) {
    .shop-list {
        grid-template-columns: repeat(2, 1fr);
        max-width: 710px;
        margin: 0 auto;
    }
}
@media (max-width: 767px) {
    .shop-list::before { left: 0px; bottom: -46px; width: 84px; height: 91px; }
    .shop-list::after { right: 10px; top: -65px; width: 58px; height: 54px; transform: rotate(-45deg); }
    .shop-list { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 5px 5px; 
        max-width: none; 
    }
    .shop-card { 
        width: 100%; 
        max-width: none;
        min-width: 165px;
        height: auto; min-height: 280px; 
        border-radius: 10px; padding: 10px; 
    }
    .shop-photo { 
        width: 100%; 
        height: auto; 
        aspect-ratio: 145 / 110;
        border-radius: 10px; margin-bottom: 10px; 
    }
    .shop-photo img { height: 100%; }
    
    .shop-info-area { flex-direction: column; align-items: center; margin-bottom: 10px; gap: 5px; }
    .shop-logo { width: 60px; height: 60px; }
    .shop-text { width: 100%; padding-left: 0; text-align: center; }
    .shop-cat { text-align: center; font-size: 9px; margin-bottom: 2px; }
    .shop-name { text-align: center; font-size: 14px; }
    .shop-button { width: 145px; height: 20px; font-size: 9px; align-self: center; }
}

/* FLOOR MAP */
.sec-floor { background-color: var(--color-bg-floor); }
.floor-lead { text-align: center; font-size: 16px; font-weight: bold; color: var(--color-text); margin-bottom: 40px; line-height: 1.8; }
.floor-map-container { position: relative; width: 100%; max-width: 900px; margin: 0 auto 80px auto; }
.floor-main-map { width: 100%; height: auto; display: block; }
.floor-tree-left { position: absolute; left: -150px; top: -90px; width: 305px; height: auto; z-index: 1; }
.floor-tree-right { position: absolute; right: -130px; top: -120px; width: 107px; height: auto; z-index: 1; }
.floor-area-list { display: grid; grid-template-columns: 1fr 1fr; gap: 60px 60px; }
.floor-area-img-wrap { position: relative; margin-bottom: 20px; }
.floor-area-img-wrap > img { width: 100%; height: auto; border-radius: 10px; }
.floor-area-icons { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; z-index: 2; }
.floor-area-icons img { width: auto; height: 40px; }
.floor-area-balloon { position: absolute; width: 90px; height: auto; z-index: 3; }
.floor-area-balloon img { width: 100%; height: auto; }
.balloon-a { top: -40px; left: 29px; }
.balloon-b { top: 12px; right: -58px; }
.balloon-c { top: 35px; left: -49px; }
.balloon-d { top: -44px; right: 20px; }
.floor-area-title { font-size: 20px; font-weight: 700; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px; }
.area-label { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; font-weight: 700; color: #333; font-family: var(--font-en); }
.label-a { background-color: #f9dc82; } .label-b { background-color: #c8d28c; } .label-c { background-color: #cebe96; } .label-d { background-color: #b4cdbe; }
.floor-area-desc { font-size: 14px; line-height: 1.8; margin: 0; text-align: left; }
.floor-footer-msg { margin-top: 60px; text-align: center; font-weight: bold; font-size: 16px; line-height: 1.8; }

@media (max-width: 767px) {
    .floor-lead { font-size: 14px; margin-bottom: 30px; }
    .floor-map-container { margin-bottom: 50px; }
    .floor-tree-left, .floor-tree-right { display: none; }
    .floor-area-list { grid-template-columns: 1fr; gap: 40px; }
    .floor-area-title { font-size: 18px; }
    .floor-area-desc { font-size: 14px; }
    .floor-footer-msg { font-size: 14px; margin-top: 40px; text-align: center; }
    .balloon-a { top: -40px; left: 26px; }
    .balloon-b { top: -39px; right: 20px; }
    .balloon-c { top: -22px; left: 20px; }
    .balloon-d { top: -47px; right: 10px; }
    .floor-area-icons { top: -9px; right: 20px; }
}

/* HOW TO USE */
.howto-group { margin-bottom: 80px; }
.howto-group:last-child { margin-bottom: 0; }
.howto-group-title {
    font-size: 22px; font-weight: 700; text-align: center;
    border-bottom: 1px solid var(--color-text); padding-bottom: 8px; margin-bottom: 10px;
    display: table; margin-left: auto; margin-right: auto;
}
.howto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: start; }
.howto-step { display: flex; flex-direction: column; text-align: left; }
.howto-image { 
    width: 100%; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; 
    min-height: 195px; 
}
.howto-image img { 
    height: 195px; width: auto; max-width: 100%; object-fit: contain; 
}
.howto-step h3 { font-size: 20px; font-weight: 700; margin: 0 0 10px 0; }
.howto-step p { font-size: 14px; margin: 0; line-height: 1.6; }
@media (max-width: 767px) {
    .howto-group-title { font-size: 20px; margin-bottom: 30px; }
    .howto-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 15px; }
    .howto-step h3 { font-size: 16px; }
    .howto-step p { font-size: 13px; }
    .howto-image { min-height: 160px; margin-bottom: 10px; }
    .howto-image img { height: 160px; }
}

/* ACCESS */
.sec-access { background-color: #fff; }
.access-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 60px; flex-wrap: nowrap; }
.access-map iframe { width: 590px; max-width: 100%; height: 300px; vertical-align: bottom; }
.access-info { line-height: 2; text-align: left; flex-shrink: 0; }
.access-info p { margin: 0; }
.access-block { margin-bottom: 30px; }
.access-block:last-child { margin-bottom: 0; }
.access-zip, .access-address, .access-tel, .access-hours, .access-hours-title { display: block; }
.access-hours-title { margin-bottom: 5px; }
.access-hours { display: block; }
.access-note { font-size: 12px; display: block; }
@media (max-width: 960px) { 
    .access-content { flex-direction: column; gap: 40px; }
    .access-info { 
        text-align: center; width: 100%; 
        order: 1;
    }
    .access-map { 
        order: 2;
    }
}

/* バナー */
.sc-banner-area { background-color: var(--color-bg-body); padding: 60px 0; text-align: center; }
.banner-wrapper { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.banner-box {
    width: 900px; height: 200px; background-color: var(--color-bg-green);
    display: flex; align-items: center; justify-content: center; transition: opacity 0.3s; max-width: 100%; 
}
.banner-box:hover { opacity: 0.8; }
.banner-logo { width: 300px; height: auto; }
.banner-sub-link a { font-size: 16px; color: var(--color-text); text-decoration: underline; font-weight: 500; }
.banner-sub-link a:hover { text-decoration: none; opacity: 0.7; }
@media (max-width: 767px) {
    .banner-box { width: 100%; height: 150px; padding: 40px 20px; }
    .banner-logo { width: 200px; }
    .banner-wrapper { gap: 40px; }
}

/* フッター */
.lp-footer { background-color: var(--color-bg-green); height: 100px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.footer-inner { width: 100%; max-width: var(--wide-width); display: flex; align-items: center; justify-content: center; height: 100%; }
.copyright { font-size: 14px; font-family: var(--font-en), var(--font-ja), sans-serif; letter-spacing: 0.05em; margin: 0; text-transform: uppercase; }