@charset "utf-8";

/* ************************************************************** */
/* compact header */
/* ************************************************************** */

.folding_header #header {
    position: inherit;
}

/* グローバルナビ囲み余白 */
.responsive .folding_header #inner_header {
    padding: 5px 10px 10px;
}

/* コピーライト左寄せ */
.folding_header .copy {
    text-align: left;
}

/* ロゴサイズ変更左寄せ */
.folding_header .header_center {
    max-width: 130px;
    text-align: left;
}
.folding_header .shoplogo img {
    width: 120px;
}

/* スマホハンバーガーオープン */
.folding_header .nav-open {
    overflow: hidden;
}
.folding_header .nav-open .hamburger_nav.open {
    overflow: auto
}
.folding_header .hamburger_nav.open .empty_nav_label .nav_label {
    display: inline;
}
.folding_header .hamburger_nav.open .empty_nav_label .nav_text {
    padding: 0;
}

/* ************************************************************** */
/* グローバルナビ */
/* ************************************************************** */

/* 各ナビ均等配置 */
.folding_header .hamburger_nav {
    flex: 1;
    align-self: center;
    margin: 0 15px;
}

.folding_header .global_nav {
    position: inherit;
}

/* 各ナビ余白、背景、罫線リセット */
.folding_header .global_nav,
.folding_header .global_nav_item .nav_btn,
.folding_header .global_nav_item:first-child .nav_btn {
    background-color: transparent;
    background-image: none;
    box-shadow: 0 0 0;
}
.folding_header .global_nav,
.folding_header .global_nav_item > .nav_btn {
    border: none;
}
.folding_header .global_nav_item:first-child .nav_btn {
    border-left: none;
}
.folding_header .inner_popup_nav .nav_btn {
    border-right: none;
}

/* アイコンサイズ */
.responsive .folding_header .inner_global_nav .menu_nav_icon {
    font-size: 16px;
    margin-bottom: 0;
}

/* PC時格納ナビ */
.header_nav .g_menu.empty_nav_label .nav_text {
    padding: 0;
}

/* ************************************************************** */
/* 右上アイコンボタン */
/* ************************************************************** */

/* 伸縮リセット */
.responsive .folding_header .inner_header_nav A.nav_btn {
    flex-grow: 1;
}
.responsive .folding_header .inner_header_nav .empty_nav_label A.nav_btn {
    flex-grow: 0;
}

.folding_header .inner_header_nav .header_nav_item {
    letter-spacing: 0;
}

/* 横幅 */
.folding_header .header_nav_item .nav_text {
    min-width: 32px;
}

/* アイコンサイズ */
.folding_header .header_nav_item .nav_text .fa {
    font-size: 18px;
}

.folding_header .header_nav_size3,
.folding_header .inner_header_nav_column3,
.folding_header .use_side_menu .inner_header_nav_column3 {
    min-width: 130px;
}

/* ************************************************************** */
/* グローバルナビポップアップ */
/* ************************************************************** */

.folding_header .popup_base {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
}
.folding_header .popup_menu .popup_menu_area,
.folding_header .popup_nav_area .inner_popup_nav_area {
    position: relative;
}
.folding_header .popup_nav_area .inner_popup_nav_area.popup_sub_menu {
    position: absolute;
}

/* 大枠余白 */
.folding_header .global_nav .popup_nav,
.folding_header .inner_popup_nav_area .popup_nav {
    padding: 10px 15px 5px;
}

/* 閉じるボタン */
.folding_header .global_nav A.close_btn_box {
    width: auto;
    position: absolute;
    border-left-width: 1px;
}

/* 閉じるボタンアイコン */
.folding_header .global_nav .inner_global_nav A.close_btn_box .fa,
.responsive .folding_header .inner_header_nav .header_nav_item A.search_close .fa,
.folding_header .inner_popup_nav_area .close_btn_box .fa {
    width: auto;
    position: relative;
    margin-right: 0;
    font-size: 20px;
}
.responsive .folding_header .popup_base .nav_close_box A .fa {
    font-size: 18px;
}

/* カテゴリ/グループ名タイトル */
.folding_header .popup_nav_title .popup_sub_title {
    font-size: 123.1%;
    padding-left: 10px;
    padding-bottom: 0;
}

.folding_header .wr.responsive .folding_header .inner_header_nav .header_nav_itemapped_item .popup_nav_area .general_btn {
    width: auto;
}

/* 各ナビ */
.folding_header .hamburger_nav .popup_nav_item .nav_btn {
    padding: 10px 24px 10px 10px;
    text-align: left;
}
.folding_header .popup_base .nav_btn {
    justify-content: flex-start;
}
.folding_header .inner_global_nav .nav_btn,
.folding_header .inner_popup_nav .nav_btn {
    font-size: 108%;
    font-weight: 500;
    text-align: left;
}

/* サブカテゴリから戻るボタン */
.folding_header .popup_menu_back {
    width: 60px;
}
.folding_header .popup_base .popup_menu_back .backinput {
    box-sizing: content-box;
}

/* グローバルナビ格納ナビ横幅(PC時のみ) */
.responsive .folding_header .global_nav .wrapped_item.g_menu {
    max-width: 80px;
}

/* スマホ幅でポップアップした文字サイズボタン枠 (※文字サイズボタンを非表示にした場合用) */
.hamburger_nav.open .upper_popup_nav {
    min-height: 50px;
}


/* ************************************************************** */
/* 検索ポップアップ */
/* ************************************************************** */

.folding_header .popup_search_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* 検索ボタンテキスト */
.folding_header .search_bar .global_btn .button_text {
    font-size: 12px;
}

/* 検索ボタンのアイコンフォントに、右上ボタン用の指定が当たらないようにする */
.folding_header .popup_search_bar .search_form .searchinput .fa {
    position: static;
    display: inline-block;
    font-size: inherit;
    color: inherit;
}

/* グローバルナビ商品検索閉じるボタン */
.global_nav .popup_search_bar .close_btn_box .search_close {
    width: auto;
    position: absolute;
    font-size: 20px;
}
.global_nav .popup_search_bar .close_btn_box .search_close .fa {
    margin-right: 0;
    font-size: 20px;
}

/* コンパクトヘッダー時はiOS Safe Area用の指定を無しにする (※コンパクトヘッダー時はviewportのviewport-fit=cover指定なし) */
.uppermost_note,
.header,
.global_nav,
.popup_base,
#contents_top,
#contents_bottom,
#photo,
#contents,
#footer_free_top,
.footer_nav,
.footer_pc_site_box,
#footer,
#ochanoko,
.overlay_product .modal_skin,
.free_contents_container {
    padding-left: 0;
    padding-right: 0;
}


/* ************************************************************** */
/* responsive @media */
/* ************************************************************** */
@media screen and (max-width: 839px) {

    /* ヘッダー固定 */
    .use_folding_header header {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .folding_header #inner_header {
        position: relative;
        min-height: 40px;
    }

    /* タッチ端末用処理 */
    .folding_header .hamburger_nav {
        align-items: center;
        display: block;
        height: 100%;
        opacity: 0;
        margin: 0;
        padding: 50px 0 0;
        position: fixed;
        z-index: 99;
        visibility: hidden;
        width: 100%;
        transition: .5s;
        top: 0;
        left: 0;
    }
    .folding_header .hamburger_nav::before {
        content: "";
        display: block;
        height: 60px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }
    .folding_header .hamburger_nav.open {
        opacity: 1;
        visibility: visible;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* iOS Safariで、ポップアップしたタップ位置がずれる場合がある点の対策 */
    html.compact_header_nav_opened {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
    }
    .compact_header_nav_opened body {
        overflow: hidden;
    }
    .folding_header .sp_menu {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 15px;
        width: 25px;
        height: 25px;
        margin: 0 auto;
        cursor: pointer;
        z-index: 9999;
    }
    .folding_header .sp_menu.active {
        position: fixed;
        top: 10px;
        transform: translateY(0);
        right: 10px;
        width: 20px;
    }
    .folding_header .sp_menu .bar {
        display: inline-block;
        width: 25px;
        height: 3px;
        border-radius: 3px;
        position: absolute;
        left: 0;
    }
    .folding_header .sp_menu.active .bar {
        width: 20px;
    }
    .folding_header #bar01 {
        top: 0;
    }
    .folding_header #bar02 {
        top: 9px;
        width: 25px;
    }
    .folding_header #bar03 {
        top: 18px;
    }
    .folding_header .active #bar01 {
        top: 11px;
        transform: rotate(45deg);
    }
    .folding_header .active #bar02 {
        width: 0;
    }
    .folding_header .active #bar03 {
        top: 11px;
        transform: rotate(135deg);
    }

    /* ハンバーガー表示用余白 */
    .folding_header .header_right {
        margin-right: 40px;
    }

    /* ハンバーガーメニューを開いた際には未承認バナーを表示しない */
    html.compact_header_nav_opened #non_approved {
        z-index: -1;
    }

    /* 文字サイズ */
    .compact_header_nav_opened .folding_header .popup_primal_menu .popup_nav_box > .upper_popup_nav {
        width: 100dvw;
        margin-top: 0;
        padding-top: 5px;
        position: fixed;
        top: 0;
        z-index: 60;
    }
    .folding_header .popup_primal_menu .upper_popup_nav .font_setting {
        text-align: left;
    }

    /* ハンバーガーメニュー内に枠の不要な余白を加えない */
    .folding_header .global_nav {
        padding-bottom: 0;
    }

    /* グローバルナビ縦積み */
    .folding_header .inner_global_nav {
        flex-wrap: wrap;
    }

    /* 各ナビ横幅100% */
    .folding_header .global_nav .global_nav_item,
    .folding_header .popup_nav .popup_nav_item {
        width: 100%;
        display: block;
    }

    /* メニューを開いた中身のメニュー (※内側のa要素をli要素の高さと等しくする) */
    .folding_header .popup_menu_opener .popup_nav .popup_nav_item {
        display: flex;
    }

    /**
     * タブレット縦向き時に、ハンバーガーメニュー内のメニューを全て1列表示にする
     */
    .folding_header .popup_menu .inner_popup_nav_area .popup_nav .popup_nav_item,
    .folding_header .popup_base_menu > .popup_primal_menu > .inner_popup_nav_area > .popup_nav > .inner_popup_nav > .popup_nav_item  {
        width: 100%;
    }

    /* ポップアップナビ余白 */
    .folding_header .global_nav .popup_nav,
    .folding_header .inner_popup_nav_area .popup_nav {
        padding: 0;
    }

    /* ポップアップをrelativeにしトップ位置0 */
    .folding_header .popup_base {
        top: 0;
        left: 0;
        transform: none;
        position: relative;
    }

    /* PC時の余りナビ-トグルを非表示 */
    .folding_header .g_menu > .nav_btn {
        display: none;
    }
    /* PC時の余りナビ-格納ナビを強制表示 */
    .folding_header .hamburger_nav.open .popup_base .popup_primal_menu.hidden_nav_area .popup_nav_box {
        opacity: 1;
    }
    .folding_header .hamburger_nav.open .popup_base .popup_primal_menu.hidden_nav_area,
    .folding_header .hamburger_nav.open .popup_base .popup_primal_menu.hidden_nav_area .keep_menu_open .hidden_nav_area {
        visibility: visible;
        overflow: visible;
        height: auto !important;
    }

    /* 下部閉じるボタン/格納メニュー閉じるボタン/カテゴリ折り畳みタイトル非表示 */
    .folding_header .hamburger_nav .popup_base .close_btn_box,
    .folding_header .hamburger_nav .inner_global_nav .close_btn_box,
    .folding_header .nav_close_box,
    .folding_header .popup_nav_title .upper_popup_nav {
        display: none;
        pointer-events: none;
    }

    /* グローバルナビアイコン */
    .folding_header .inner_global_nav .menu_nav_icon {
        width: 1em;
        display: inline-block;
        margin-right: 1px;
        font-size: 14px;
    }

    /* グローバルナビ各ナビ */
    .folding_header .inner_global_nav .nav_btn {
        font-size: 108%;;
        justify-content: flex-start;
        padding: 10px;
    }

    /* 右寄せ矢印アイコンサイズ */
    .folding_header .inner_global_nav .nav_btn .fa.chevron_right_icon {
        font-size: 18px;
    }

    /* カテゴリ/グループアイコン */
    /* サブカテゴリアイコン */
    .folding_header .inner_global_nav .global_nav_item > .nav_btn:after {
        content: "\f054";
        display: inline-block;
        font-family: 'FontAwesome';
        font-size: 18px;
        position: absolute;
    }

    /* メインカテゴリ/グループ用開閉アイコン */
    .folding_header .inner_global_nav .popup_menu_opener > .nav_btn:after,
    .folding_header .inner_popup_nav .popup_menu_opener > .nav_btn .chevron_right_icon:before,
    .folding_header .inner_global_nav .g_search > .nav_btn:after,
    .folding_header .inner_popup_nav .t_search > .nav_btn .chevron_right_icon:before {
        content: "\f078";
        transform: rotate(0deg) scale(1);
        transition: transform 0.2s linear;
    }
    .use_hover .folding_header .inner_global_nav .popup_menu_opener > .nav_btn:hover:after,
    .use_hover .folding_header .inner_global_nav .g_search > .nav_btn:hover:after,
    .use_hover .folding_header .inner_popup_nav .t_search > .nav_btn:hover .chevron_right_icon:before {
        transform: rotate(0deg) scale(1.2);
    }
    .folding_header .inner_global_nav .popup_menu_opener > .nav_btn .chevron_right_icon,
    .folding_header .inner_popup_nav .popup_menu_opener > .nav_btn .chevron_right_icon,
    .folding_header .inner_global_nav .g_search > .nav_btn .chevron_right_icon,
    .folding_header .inner_popup_nav .t_search > .nav_btn .chevron_right_icon {
        transform: translateX(0px);
    }

    /* メインカテゴリ/グループ用開閉メニューが開いた場合の開閉アイコン */
    .folding_header .inner_global_nav .popup_menu_opener.popup_opened > .nav_btn:after,
    .folding_header .inner_global_nav .g_search:not(:has(.hidden_search_bar)) > .nav_btn:after,
    .folding_header .inner_popup_nav .t_search:not(:has(.hidden_search_bar)) > .nav_btn .chevron_right_icon:before {
        transform: rotate(180deg) scale(1);
    }
    .use_hover .folding_header .inner_global_nav .popup_menu_opener.popup_opened > .nav_btn:hover:after,
    .use_hover .folding_header .inner_global_nav .g_search:not(:has(.hidden_search_bar)) > .nav_btn:hover:after,
    .use_hover .folding_header .inner_popup_nav .t_search:not(:has(.hidden_search_bar)) > .nav_btn:hover .chevron_right_icon:before {
        transform: rotate(180deg) scale(1.2);
    }

    /* ポップアップするメニューは特殊なので、別指定 */
    .folding_header .inner_popup_nav .popup_menu_opener > .nav_btn:hover .chevron_right_icon {
        rotate: 0deg;
        scale: 1;
        transition: scale 0.2s linear, rotate 0.2s linear;
    }
    .use_hover .folding_header .inner_popup_nav .popup_menu_opener > .nav_btn:hover .chevron_right_icon {
        rotate: 0deg;
        scale: 1.2;
    }
    .folding_header .inner_popup_nav .popup_menu_opener.popup_opened > .nav_btn .chevron_right_icon {
        rotate: 180deg;
        scale: 1;
    }
    .use_hover .folding_header .inner_popup_nav .popup_menu_opener.popup_opened > .nav_btn:hover .chevron_right_icon {
        rotate: 180deg;
        scale: 1.2;
    }

    /* 閉じない設定の開閉メニューのリンク */
    .hamburger_nav.open .inner_global_nav .global_nav_item.keep_menu_open > .nav_btn,
    .hamburger_nav.open .inner_popup_nav .popup_nav_item.keep_menu_open > .nav_btn {
        padding-right: 10px;
        pointer-events: none;
        cursor: default;
    }
    /* 閉じない設定の開閉メニューの右端の矢印アイコン */
    .hamburger_nav.open .keep_menu_open > .nav_btn:after,
    .hamburger_nav.open .keep_menu_open >.nav_btn .right_side_nav_icon {
        display: none;
    }

    /* 開閉メニューの右端余白 */
    .folding_header .inner_popup_nav .popup_nav_item.popup_menu_opener > .nav_btn,
    .folding_header .inner_global_nav .global_nav_item.popup_menu_opener > .nav_btn,
    .folding_header .inner_global_nav .global_nav_item.g_search > .nav_btn,
    .folding_header .inner_global_nav .nav_btn {
        padding-right: 24px;
    }

    /* 開閉しないリンクメニューをhoverした際のtransition */
    .use_hover .folding_header .inner_global_nav > :not(.popup_menu_opener):not(.g_search) .nav_btn:after {
        transition: transform 0.15s linear;
    }
    .use_hover .folding_header .inner_global_nav > :not(.popup_menu_opener):not(.g_search) .nav_btn:hover:after {
        transform: translateX(2px);
    }

    /* カテゴリ/グループアイコン用開閉アイコン位置 */
    .folding_header .inner_global_nav .nav_btn:after {
        right: 8px;
    }
    .folding_header .popup_base .right_side_nav_icon {
        right: 8px;
    }

    /* PC時の余りナビ-ポップアップ内ナビリンク有効化 */
    .folding_header .hidden_nav_area .popup_nav_box {
        pointer-events: auto;
    }

    /* PC時の余りナビ-上部のpadding-top: 10pxを非表示 */
    .folding_header .popup_primal_menu .inner_popup_nav {
        padding-top: 0px;
    }

    /* カテゴリ折り畳みサブカテゴリ */
    /* カテゴリ折り畳み-サブカテゴリ名表示 */
    .folding_header .popup_sub_menu .upper_popup_nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 0;
    }

    /* カテゴリ折り畳み-サブカテゴリ戻るボタン */
    .folding_header .popup_menu_back {
        order: 2;
        padding: 5px 0;
        margin-left: 10px;
        margin-right: 0;
        display: inline-block;
    }

    /* カテゴリ折り畳み-サブカテゴリ名余白調整 */
    .folding_header .popup_sub_menu .popup_sub_title {
        order: 1;
        width: calc(100% - 60px);
        padding: 4px 0 4px 10px;
        font-size: 116%;
        font-weight: 700;
    }

    /* PC時ポップアップ下部閉じるボタン/格納ナビ閉じるボタン */
    .folding_header .hamburger_nav .popup_base .close_btn_box,
    .folding_header .nav_close_box {
        pointer-events: none;
    }

    /* 商品検索バー */
    .folding_header .hamburger_nav.open .popup_search_bar {
        position: static;
    }

    /* スマホ幅でpopup_nav内のリンクが非表示時にクリックできてしまう点の対策 */
    .folding_header .hamburger_nav a,
    .folding_header .hamburger_nav button {
        pointer-events: none;
    }
    .folding_header .hamburger_nav.open a,
    .folding_header .hamburger_nav.open button {
        pointer-events: auto;
    }

    /* スマホ幅のポップアップナビ内でフォント拡大ボタンを押した際、メニューの文字サイズが大きくなるようにする */
    .large_font .folding_header .inner_global_nav .global_nav_item > .nav_btn {
        font-size: 131%;
    }
    /* フォント拡大時のメニューアイコン */
    .large_font .folding_header .inner_global_nav .menu_nav_icon,
    .large_font .folding_header .popup_base_menu .popup_nav_item .menu_nav_icon {
        margin-right: 2px;
        font-size: 108%;
    }
    /* フォント拡大時の溢れたメニュー部分 */
    .large_font .folding_header .popup_base_menu .popup_nav_item > .nav_btn {
        font-size: inherit;
    }
    /* フォント拡大時の溢れたメニュー内の開閉を開いた中身にあるメニュー */
    .large_font .folding_header .popup_base_menu .popup_nav_item .popup_base {
        font-size: inherit;
    }

    /* 溢れたメニュー内のメニューに余分な余白が付かないようにする */
    .hamburger_nav.open .column2 .padfix li.popup_nav_item {
        padding-left: 0;
        padding-right: 0;
    }

    /* 追加したポップアップリンク内に「もっと見る」ボタンが入った場合に、スマホ幅で幅100%が当たらないようにする */
    .folding_header .hamburger_nav .general_btn {
        width: auto;
    }

    /**
     * スマホ幅でポップアップのサブメニューが開かれた際、他のメニューを非表示にする
     */
    .hamburger_nav.open.popup_sub_menu_opened .global_nav_item:not(.popup_menu_opener.sub_menu_opened),
    .hamburger_nav.open.popup_sub_menu_opened .popup_nav_item:not(.popup_menu_opener.sub_menu_opened) {
        display: none;
    }
    /**
     * サブカテゴリ内のメニューは表示
     */
    .hamburger_nav.open.popup_sub_menu_opened .popup_menu_opener.sub_menu_opened .popup_nav_item {
        display: block;
    }

    /**
     * スマホ幅でポップアップのサブメニューが開かれた際、メニューの開閉をできないようにする
     */
    .hamburger_nav.open.popup_sub_menu_opened .popup_menu_opener.sub_menu_opened > .nav_btn {
        pointer-events: none;
    }
    .hamburger_nav.open.popup_sub_menu_opened .popup_menu_opener.sub_menu_opened > .nav_btn:after,
    .hamburger_nav.open.popup_sub_menu_opened .popup_menu_opener.sub_menu_opened > .nav_btn .right_side_nav_icon {
        display: none;
    }

    /**
      * 開いたコンパクトヘッダーメニューの最下部とスマホの下部のバーが被らないよう、SafeArea分の余白を加える
      */
    .hamburger_nav.open .header_nav {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}