@charset "utf-8";

@media (width < 768px) {

    /*----------------------------
        ローディングアニメーション
    ----------------------------*/
    .logo_text {
        font-size: 10px;
    }

    #splash_logo .fadeUp {
        width: 260px;
    }

    body #splash_logo img {
        width: 210px;
    }


    /*----------------------------
        パンくずリスト
    ----------------------------*/
    body .breadcrumb-area {
        padding: 80px 3% 0;
    }

    .custom-breadcrumb-item {
        font-size: 12px;
    }

    .breadcrumb-area .custom-breadcrumb-item i {
        margin: 0 15px;
        top: -1px
    }

    /*----------------------------
        ヘッダー
    ----------------------------*/
    .header_logo_wrap img {
        width: 80px;
    }

    .header_logo_wrap a {
        font-size: 8px;
        gap: 2px;
        max-width: 100px;
        margin: 0 auto;
        width: 100px;
        margin: 0 auto;
    }

    .nav_right_search_button {
        background: transparent;
    }

    .nav_left_logo img {
        width: 100%;
        max-height: 45px;
    }

    .fittoInsta {
        margin-left: 0;
    }

    body i.fa-solid.fa-angle-down {
        color: #3FD1CF;
    }

    .nav_left_category_inner .menu {
        padding-left: 10px;
        max-height: 43vh;
        overflow: auto;
    }

    body header,
    body header.is-animation {
        padding: 15px 4.5%;
    }

    .header_logo_wrap {
        max-width: 100px;
        margin: 0 auto;
    }

    body i.fa-solid.fa-cart-shopping {
        font-size: 18px;
    }

    .nav_hamburger_inner summary {
        cursor: pointer;
        position: absolute;
        right: 3%;
        top: 15px;
    }

    .nav_hamburger_inner summary > img {
        width: 18px;
    }

    body .nav_hamburger_inner > ul {
        padding: 16px 3% 24px;
        gap: 15px;
        overflow-y: scroll;
        max-height: calc(100vh - 60px);
        z-index: 999;
    }

    .nav_upper .nav_hamburger_inner ul li {
        color: #3e3e3e;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .brand_title_item {
        padding: 15px 0;
        border-bottom: 1px solid #DDD;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }

    .nav_left_category_inner {
        padding: 8px 0;
    }

    body .nav_right_search {
        padding: 12px 15px;
        margin-top: 16px;
    }

    .nav_left_category_inner li > a[href="/"]  {
        visibility: hidden;
        height: 0;
        pointer-events: none;
        position: absolute;
        color: #fff;
    }


    .nav_left_category_inner li ul {
        visibility: visible;
    }

    .nav_right_search {
        margin-top: 8px;
    }

    .nav_left_logo .custom-logo-link img {
        width: 100%;
        height: 45px;
        max-width: 145px;
    }

    body header.is-animation h1 img {
        max-height: 45px;
        height: 45px;
    }

    body .nav_left_logo {
        height: 45px;
    }

    /*----------------------------
        RANKING
    ----------------------------*/
    .rank_content {
        gap: 32px 4.5%;
        flex-wrap: wrap;
    }

    .ranking_content_inner {
        width: 47.75%; ;
    }

    .ranking_content_inner::before {
        left: -5px;
    }

    .ranking_content_inner::after {
        left: 5px;
    }

    .ranking_content_text_name {
        min-height: 0;
    }


    /*----------------------------
        FEATURES
    ----------------------------*/
    .home .section-pickup {
        margin-top: 47px;
        margin-bottom: 47px;
    }

    /*----------------------------
        RECOMMEND
    ----------------------------*/
    .home .section-recommend {
        margin: 64px 0;
    }

    body .about_content_left,
    body .about_content_right {
        width: 100%;
    }
    /*----------------------------
        ITEM CATEGORY
    ----------------------------*/
    .section-brand + .section-category {
        padding-bottom: 20px;
    }
    /*----------------------------
        BRAND LIST
    ----------------------------*/
    body .section-brand .brand_img {
        height: 100%;
        width: 100%;
        max-height: unset;
        max-width:  unset;
        aspect-ratio: 1/1;
    }

    body .brand_content_inner a::before {
        padding-top: 74px;
    }

    .brand_name {
        font-size: 11px;
        letter-spacing: 0.7px;
        margin-top: 5px;
        line-height: 1.3;
    }

    .section-brand .brand_content_inner {
        width: calc(25% - 12px);
    }

    body .section-brand .brand_content {
        gap: 20px 16px;
        justify-content: flex-start;
    }

    body .brand_content_inner img {
        position: relative;
    }

   body  .brand_content_inner a::before {
        content: none;
    }

    /*----------------------------
        フッター
    ----------------------------*/

    body .footer_right {
        width: 100%;
    }

    body .footerLogo img {
        width: 250px;
    }

    body .footer_right ul {
        margin: 0;
        gap: 16px;
    }

    .footer_right ul .footer_insta img {
        margin-left: 0;
        width: 24px;
        height: 24px;
    }

    footer .copyright {
        text-align: center;
        font-size: 13px;
    }

    body .footer_right ul a {
        font-size: 14px;
    }

    body .footer_right ul a img {
        width: 17px;
        height: 17px;
    }

    body .footer_right ul .footer_insta img {
        width: 24px;
        height: 24px;
    }

    body .footerLogo {
        width: 210px;
    }

    body .footerLogo img {
        width: 210px;
    }

    body .footer_left{
        margin: 0 auto 0 0;
    }

    .footer_upper .width_adjust {
        flex-direction: column;
        gap: 46px;
    }

    .footer_upper_left, .footer_upper_right,
    .footer_lower_left, .footer_lower_right {
        width: 100%;
        text-align: left;
    }

    .footer_upper_left a {
        margin-bottom: 20px;
    }

    .footer_upper_right ul {
        display: flex;
        flex-direction: column;
        gap: 19px;
    }

    .footer_lower {
        padding: 30px 0;
    }

    .footer_lower .width_adjust {
        flex-direction: column;
        gap: 20px;
    }

    .footer_lower_right {
        text-align: left;
    }

    .footer_upper {
        font-size: 14px;
        padding: 40px 0;
    }

    .footer_upper .width_adjust {
        gap: 30px;
    }

    .footer_upper_left img {
        height: 30px;
    }

    .footer_upper_right ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .footer_upper_right ul img {
        width: 25px;
        height: 25px;
    }

    .footer_lower {
        font-size: 14px;
    }

    .footer_lower_left ul {
        gap: 5%;
    }

    .footer_lower_right {
        font-size: 12px;
    }

    .footer_lower_right p:last-of-type {
        font-size: 10px;
    }

    .footer_upper_left a {
        margin-bottom: 10px;
    }


    /*----------------------------
        トップに戻るボタン
    ----------------------------*/

    #page-top a {
        bottom: 160px !important;
    }

    /*----------------------------
        カスタムログイン/ログアウトバー（左上）SP
    ----------------------------*/
    #custom-login-bar {
        font-size: 11px;
        padding: 5px 10px;
    }
    
    #custom-login-bar .custom-login-username {
        font-size: 11px;
        display: block;
        line-height: 1.4;
    }
    
    #custom-login-bar .custom-login-welcome {
        display: block;
    }
    
    #custom-login-bar .custom-login-name {
        display: block;
    }
    
    #custom-login-bar .custom-login-link {
        font-size: 11px;
    }
    
    #custom-login-bar .custom-login-dropdown {
        padding-top: 2px;
        margin-top: 1px;
        min-width: 80px;
    }
    
    #custom-login-bar .custom-login-logout {
        font-size: 10px;
        padding: 1px 0;
        line-height: 1.2;
    }
}