/* ====== 全体 ====== */
body {
    margin: 0;
    font-family: sans-serif;
}
[class^="icon-"],
[class*=" icon-"] {

    -webkit-font-variant-ligatures: initial !important;
    font-variant-ligatures: initial !important ;

}
body.home {
    padding-top: 60px;
}

/* 固定ヘッダー分の余白 */

/* ====== 固定ヘッダー（黒） ====== */
.header-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: #000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
}

.logo {
    display: flex;
    align-items: flex-start;
}

/* ▼ ロゴ＋タグラインを縦積みにする土台 */
/* ▼ ロゴとタグラインを“ロゴの幅”に合わせてまとめる箱（インライン幅にフィット） */
.logo-stack {
    display: inline-flex;
    /* ← inline-block → inline-flex に変更 */
    flex-direction: column;
    /* 縦積み */
    align-items: center;
    /* 子要素を水平方向に中央揃え */
}

.logo h1 {
    margin: 0;
}

.text-logo {
    color: #fff !important;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    display: block;
}

/* ▼ タグライン：ロゴの直下・小さめ・同幅（logo-stack が inline-block なので幅がロゴにフィット） */
.tagline {
    color: #cfcfcf;
    font-size: 10px;
    line-height: 1.1;
    margin-top: 2px;
    white-space: nowrap;
}

.header-icons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-icons a,
.hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    padding: 2px 4px;
}

.header-icons img {
    height: 18px;
    margin-bottom: 2px;
}

.hamburger {
    cursor: pointer;
}

.hamburger .burger {
    width: 22px;
    height: 2px;
    background: #fff;
    display: block;
    position: relative;
}

.hamburger .burger::before,
.hamburger .burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #fff;
}

.hamburger .burger::before {
    top: -6px;
}

.hamburger .burger::after {
    top: 6px;
}

/* 視覚的に非表示（アクセシビリティ用） */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
}

/* ====== トップ下の4ボタン ====== */
.menu-buttons-wrapper {
    margin-top: 0;
}

.menu-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.menu-buttons a {
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    width: 25%;
    box-sizing: border-box;
    padding: 5px 0;
    border-left: 1px solid #ddd;
}

.menu-buttons a:first-child {
    border-left: none;
}

.menu-buttons img {
    height: 24px;
    margin-bottom: 4px;
}

/* ====== ハンバーガーメニュー ====== */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 10010;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
    overflow-y: auto;
}

.mobile-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.close-btn {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.menu-search {
    background: #fff;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.menu-search form {
    display: flex;
    gap: 8px;
}

.menu-search input[type="search"] {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;
}

.menu-search button {
    width: 44px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu-search button svg {
    width: 18px;
    height: 18px;
}

.menu-section-title {
    background: #f5f5f5;
    color: #333;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 16px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.accordion-item {
    border-bottom: 1px solid #eee;
    background: #fff;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    background: #fff;
}

.accordion-header .label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.accordion-header img {
    width: 18px;
    height: 18px;
}

.accordion-header .plus {
    font-size: 18px;
}

.accordion-header .label a {
    text-decoration: none;
    color: inherit;
}

.accordion-content {
    display: none;
    flex-direction: column;
    background: #fafafa;
}

.accordion-content a {
    padding: 12px 16px;
    text-decoration: none;
    color: #000;
    font-size: 13px;
    border-top: 1px solid #eee;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: #111;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.menu-link img {
    width: 18px;
    height: 18px;
}

.menu-banner {
    padding: 0px;
    text-align: center;
}

.menu-banner img {
    max-width: 100%;
    height: auto;
}

/* ====== 4ボタン直下アコーディオン（キッズ／レディース／メンズのみ保持） ====== */
.mb-accordion {
    background: #fff;
    border-bottom: 1px solid #eee;
}

.mb-panel {
    display: none;
    border-top: 1px solid #eee;
    background: #fff;
}

.mb-panel.open {
    display: block;
    background: #f7f7f5;
}

/* 開いているときだけ淡グレー */
.mb-links {
    list-style: none;
    margin: 0;
    padding: 8px 12px;
}

.mb-links > li + li {
    margin-top: 2px;
}

.mb-links > li > a {
    display: block;
    padding: 12px 2px;
    border-bottom: 1px solid #e9e9e9;
    text-decoration: none;
    color: #111;
    font-size: 13px;
    background: transparent;
}

/* ▼ カラー検索リスト（色で絞り込む）：mbKids 内で使用 */
.color-list {
    list-style: none;
    margin: 0;
    padding: 0 0 8px 18px;
    border-left: 1px solid #eee;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
    background: transparent;
}

.color-list.open {
    max-height: 800px;
    background: #f7f7f5;
}

.color-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e9e9e9;
    text-decoration: none;
    color: #111;
    font-size: 13px;
    font-weight: 400;
    background: #f7f7f5;
}

.color-list li img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    object-position: center;
    border-radius: 6px;
    display: block;
}

/* サブリストの体裁（任意） */
.subrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 2px;
    border-bottom: 1px solid #e9e9e9;
}

.subrow a {
    text-decoration: none;
    color: #111;
    font-size: 13px;
}

.fold-subtoggle {
    background: transparent;
    border: 0;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
}

/* 超狭幅の微調整 */
@media (max-width: 360px) {
    .text-logo {
        font-size: 17px;
    }

    .header-icons img {
        height: 17px;
    }

    .hamburger .burger,
    .hamburger .burger::before,
    .hamburger .burger::after {
        width: 20px;
    }
}

/*/////////////////////////////////////////
//  footer
/////////////////////////////////////////*/

/* ---------------- 基本スタイル ---------------- */
.rd-sitemap {
    background: #000;
    color: #fff;
    font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

.rd-sitemap a {
    color: #fff;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.rd-sitemap a:hover,
.rd-sitemap a:focus-visible {
    opacity: 0.85;
    transform: translateX(2px);
}

.rd-sitemap .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 16px;
}

/* 見出し（▼を付与） */
.rd-sitemap h3 {
    font-size: 15px;
    letter-spacing: 0.02em;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.rd-sitemap h3::before {
    content: "▼";
    font-size: 14px;
}

/* 箇条書き（・）のトーン */
.rd-sitemap ul {
    list-style: disc;
    margin: 0;
    padding-left: 1.1em;
}

.rd-sitemap li {
    margin: 0.38em 0;
}

.rd-sitemap li::marker {
    color: #fff;
}

/* レイアウト：モバイル2列 */
.rd-sitemap .grid {
    display: grid;
    gap: 24px 28px;
    grid-template-columns: 1fr 1fr;
}

.rd-sitemap .sec {
    min-width: 0;
}

.rd-sitemap .note {
    font-size: 12px;
    opacity: 0.9;
    margin-top: 4px;
}

/* 文字サイズ（添付画像トーンに合わせる） */
.rd-sitemap,
.rd-sitemap li,
.rd-sitemap a {
    font-size: 14px;
    line-height: 1.8;
}

/* 下段：クイックリンク＆TEL */
.rd-sitemap .bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 26px;
    padding-top: 18px;
    text-align: center;
}

.rd-sitemap .quick {
    display: flex;
    justify-content: center;
    gap: 42px;
    margin: 6px 0 14px;
}

.rd-sitemap .quick a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    gap: 6px;
}

.rd-sitemap .quick svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

.rd-sitemap .tel {
    font-size: 28px;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin: 6px 0 2px;
}

.rd-sitemap .hours {
    font-size: 12px;
    opacity: 0.85;
}

.rd-sitemap .copy {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
}

/* PC（769px~）：列を増やし横ワイド */
@media (min-width: 769px) {
    .rd-sitemap .grid {
        grid-template-columns: 2fr 1.3fr 1fr;
        align-items: start;
    }

    .rd-sitemap,
    .rd-sitemap li,
    .rd-sitemap a {
        font-size: 13.5px;
        line-height: 1.7;
    }

    .rd-sitemap h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .rd-sitemap .wrap {
        padding: 34px 20px;
    }

    .rd-sitemap .quick {
        gap: 56px;
    }

    .rd-sitemap .tel {
        font-size: 30px;
    }
}

/* タップ強調（iOS/Android） */
.rd-sitemap a:active {
    opacity: 0.75;
    transform: translateX(1px);
}

@media (prefers-reduced-motion: reduce) {
    .rd-sitemap a {
        transition: none;
    }

    .rd-sitemap a:hover,
    .rd-sitemap a:focus-visible,
    .rd-sitemap a:active {
        transform: none;
    }
}

/* フッターロゴ調整 */
.footer-logo img {
    height: 30px;
    margin-top: 10px;
    margin-bottom: 0;
    opacity: 0.9;
}

/* ====== 他CSSのリセットを打ち消して、マーカーと▼を確実に表示 ====== */
/* 1) 全体リセット(list-style:none 等) を無効化して ・ を復活 */
.rd-sitemap ul {
    list-style: disc outside !important;
    padding-left: 1.2em;
}

.rd-sitemap li {
    display: list-item !important;
    list-style: disc outside !important;
}

/* 2) レディース > パンツ配下の「›」は ::before で安定表示 */
.rd-sitemap .subsub {
    padding-left: 0;
    margin-top: 6px;
}

.rd-sitemap .subsub li {
    list-style: none !important;
    /* 親のdisc指定を打ち消す */
    position: relative;
    padding-left: 1.1em;
    /* 疑似要素ぶんの余白 */
    margin: 0.28em 0;
}

.rd-sitemap .subsub li::before {
    content: "\203A";
    /* Unicode（›） */
    position: absolute;
    left: 0;
    top: 0.05em;
    line-height: 1;
    opacity: 0.95;
}

/* 3) 見出しの▼がテーマに消されないように強制 */
.rd-sitemap h3 {
    position: relative;
    padding-left: 1.2em;
}

.rd-sitemap h3::before {
    content: "▼" !important;
    position: absolute;
    left: 0;
    top: 0.05em;
    display: inline-block;
    font-size: 0.95em;
}

@media (max-width: 768px) {
    .rd-sitemap .grid .sec:nth-of-type(2) ul li:nth-child(3),
    .rd-sitemap .grid .sec:nth-of-type(2) ul li:nth-child(6),
    .rd-sitemap .grid .sec:nth-of-type(2) ul li:nth-child(9) {
        margin-top: 2em;
        /* 通常より大きい余白（調整可） */
    }
}

/* ====== ページトップ カスタムボタン ====== */
#custom-page-top {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 9999;
    display: none;
}

#custom-page-top .cpt-btn {
    display: block;
    width: 44px;
    height: 44px;
    transition: transform 0.15s ease;
}

@media (hover: hover) {
    #custom-page-top .cpt-btn:hover {
        transform: scale(1.05);
    }

    #custom-page-top .cpt-btn:hover circle,
    #custom-page-top .cpt-btn:hover polyline {
        stroke: #000;
    }
}

@media (min-width: 769px) {
    #custom-page-top {
        right: 18px;
        bottom: 18px;
    }
}

/* 既定の #page-top を無効化 */
#page-top,
#page_top {
    display: none !important;
}