@charset "utf-8";

/*-------------------------------------------------*/


/*(C) FUN-CREATE Co.,Ltd. All rights reserved.*/


/*--------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

/*PC パソコン----------------------------------*/


/*ヘッダー----------------------------------*/

header {
    width: 100%;
    position: fixed;
    height: 120px;
    top: 0;
    left: 0;
    z-index: 50;
    background-color: #FFFFFF;
    opacity: 1;
}


/*アンカーリンク用クラス*/

a.anchor {
    display: block;
    margin-top:-200px;
    padding-top:200px;
}


/*固定ヘッダー分の裏技*/


/* .header_back {
    position: absolute;
    width: 100%;
    height: 120px;
}

.header_back2 {
    position: relative;
    width: 100%;
    height: 120px;
} */

.area_top_h {
    background-color: #FF8BA7;
    line-height: 1.2rem;
}

.area_top_h_box {
    color: #FFFFFF;
    font-size: 10px;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 30px;
}

.area_mid_h {
    height: 65px;
    display: flex;
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
}


/*ロゴ*/

.logo_h {
    padding-top: 15px;
}

.logo_h img {
    width: 160px;
}


/*ヘッダーメインナビ*/

.main_nav_h {
    margin: 0 0 0 auto;
}

.li_main_nav_h {
    display: flex;
    justify-content: flex-end;
}

.li_main_nav_h>li {
    white-space: nowrap;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #33272A;
    position: relative;
    display: block;
    transition: .3s;
    height: 65px;
    padding-top: 15px;
}

.li_main_nav_h>li::after {
    content: " ";
    display: block;
    width: 11px;
    height: 11px;
    background: url("https://handmadeshopyou.itembox.design/item/ic_arr_down.svg") no-repeat;
    position: absolute;
    top: 38px;
    left: 45%;
}

.li_main_nav_h>li:hover::before {
    content: " ";
    display: block;
    width: 100%;
    height: 5px;
    transition: all .2s ease-out;
    background-color: #FF5D84;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    animation: border_anim .2s linear forwards;
}

@keyframes border_anim {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.menu--mega {
    position: relative;
}

.child_menu--mega_box {
    position: absolute;
    top: 83;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    background: #FAEEE7;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    margin-top: 21px;
}

.child_menu--mega {
    display: flex;
    justify-content: center;
    padding: 20px 40px 40px 40px;
}

.child_menu--mega dl {
    display: table-column;
    line-height: 1.6rem;
    margin-right: 50px;
}

.child_menu--mega dl:last-child {
    margin-right: 0;
}

.child_menu--mega-small dl {
    display: table-column;
    line-height: 1.6rem;
}

.child_menu--mega dt {
    font-size: 16px;
    color: #FF5D84;
    font-weight: bold;
    margin-top: 20px;
}

.child_menu--mega dt a {
    font-weight: bold;
    color: #FF5D84;
}

.child_menu--mega dt a:hover {
    color: #FE1E54;
}

.child_menu--mega dd a {
    font-size: 14px;
    color: #33272A;
}

.child_menu--mega dd a:hover {
    color: #FF5D84;
}

.menu--mega:hover .child_menu--mega_box {
    /* 下層メニューのスタイル（親項目ホバー時） */
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease;
    /* 下層メニューを表示 */
}


/*ヘッダーサブナビ*/

.sub_nav_h {}

.li_sub_nav_h {
    display: flex;
    justify-content: flex-end;
    margin-left: 30px;
}

.li_sub_nav_h>li {
    white-space: nowrap;
    font-size: 10px;
    font-weight: 300;
    width: 50px;
    letter-spacing: -0.05rem;
}

.li_sub_nav_h li a {
    font-weight: 600;
    color: #33272A;
    position: relative;
    display: block;
    height: 65px;
    padding: 39px 0 0 0px;
    transition: .3s;
    text-align: center;
}

.li_sub_nav_h li a:hover {
    opacity: .8;
}

.li_sub_nav_h li.member_login a::before {
    content: " ";
    display: block;
    width: 25px;
    height: 25px;
    background: url("https://handmadeshopyou.itembox.design/item/ic_login.svg") no-repeat;
    position: absolute;
    top: 17%;
    left: 25%;
}

.li_sub_nav_h li.contact a::after {
    content: " ";
    display: block;
    width: 25px;
    height: 25px;
    background: url("https://handmadeshopyou.itembox.design/item/ic_contact.svg") no-repeat;
    position: absolute;
    top: 17%;
    left: 25%;
}

.li_sub_nav_h li.cart a::after {
    content: " ";
    width: 25px;
    height: 25px;
    background: url("https://handmadeshopyou.itembox.design/item/ic_cart.svg") no-repeat;
    position: absolute;
    top: 17%;
    left: 25%;
}


/* ログイン・ログアウト表示 */

.logout.my-false {
    display: none;
}

.login.my-true {
    display: none;
}

.regist.my-true {
    display: none;
}


/*ヘッダー検索部分*/

.area_bot_h {
    background-color: #F5F5F5;
}

.area_bot_h_box {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0 30px;
    border: none;
    height: 37px;
}

.search_h {
    position: relative;
    font-size: 14px;
    margin-top: 6px;
}

.search_box {
    padding: 0px 30px 0px 5px;
    position: absolute;
    left: 0;
    top: 0;
    outline: 0;
    background: #fff;
    border: none;
    width: 210px;
}

.search_bt::before {
    content: " ";
    width: 20px;
    height: 20px;
    background: url("https://handmadeshopyou.itembox.design/item/ic_search.svg") no-repeat;
    display: block;
    position: absolute;
    text-indent: 0;
    top: 2px;
    left: 182px;
    cursor: pointer;
}

.welcome_h {
    margin: 0 0 0 auto;
    font-size: 12px;
    align-self: center;
}


/*フッター*/

footer {
    width: 100%;
    background-color: #594A4E;
    padding-bottom: 30px;
    margin-top: 120px;
}
.footer_item_list_box {
    background-color: #F5F5F5;
    padding: 30px 30px;
    color: #33272A;
  }
  
  .footer_item_list {
    margin: 0 auto;
    background-color: #F5F5F5;
    max-width: 1140px;
  }
  
  .footer_item_list dt {
    font-size: 12px;
    font-weight: bold;
    color: #FF8E3C;
  }
  
  .footer_item_list dt a {
    font-weight: bold;
    color: #FF8E3C;
  }
  
  .footer_item_list dd {
    font-size: 12px;
    line-height: 1.4rem;
  }
.sns_box {
    background-color: #C5BBBD;
    margin: 0 auto;
}

.sns_box ul {
    display: flex;
    justify-content: center;
}

.sns_box li {
    padding: 10px 18px 10px 18px;
}

.sns_box li img {
    width: 31px;
    height: 31px;
}

.footer_box {
    display: flex;
    width: 100%;
    margin: 0 auto;
    padding: 60px 0 10px 0;
    color: #FAEEE7;
    line-height: 1.4rem;
}

.shop_info {
    width: 40%;
}

.shop_name {
    font-size: 16px;
    font-weight: bold;
}

.shop_add {
    font-size: 12px;
}

.shop_cal {
    background-color: #FFFFFF;
    margin-top: 30px;
    padding: 10px 20px;
    width: 240px;
}

.footer_nav_m {
    width: 35%;
}

.footer_nav_r {
    width: 25%;
}

.footer_nav_list {
    line-height: 1.8rem;
}

.footer_nav_list dt {
    font-size: 20px;
    font-family: 'Fredoka One', sans-serif;
    color: #FF5D84;
    margin-bottom: 10px;
}

.footer_nav_list dd {
    font-size: 12px;
}

.footer_nav_list dd a {
    color: #FAEEE7;
    font-weight: 500;
}

.copy {
    color: #FAEEE7;
    font-size: 10px;
    line-height: 1.5rem;
    text-align: center;
    margin-top: 60px;
}

.footer_link {
    text-align: center;
    line-height: 1.5rem;
}

.footer_link li {
    display: inline;
}

.footer_link li a {
    color: #FAEEE7;
    font-size: 10px;
    line-height: 0.2rem;
}


/*SP スマホ----------------------------------*/

@media screen and (max-width: 899px) {
    /*ヘッダー----------------------------------*/
    header {
        height: 120px;
    }
    /*固定ヘッダー分の裏技*/
    .header_back,
    .header_back2 {
        height: 120px!important;
    }
    /*ロゴ*/
    .logo_h {
        padding-top: 10px;
    }
    .logo_h img {
        width: 120px;
    }
    /*ヘッダーメニュー*/
    .area_top_h_box {
        width: 100%;
        margin: 0 auto;
        padding: 0 8px;
        white-space: nowrap;
    }
    .area_mid_h {
        height: 50px;
        display: flex;
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 0 8px;
    }
    .area_bot_h {
        height: 25px;
        margin: 0 auto;
        padding: 5px 8px;
    }
    .sub_nav_h {
        margin-left: auto;
        position: relative;
        padding-top: 6px;
    }
    .li_sub_nav_h {
        padding-top: 20px;
    }
    .li_sub_nav_h li a {
        font-weight: 600;
        display: inline;
        height: 55px;
        padding: 53px 0 0 18px;
        position: relative;
    }
    .li_sub_nav_h li a:hover {
        opacity: .8;
    }
    .li_sub_nav_h li.member_login a::before {
        content: " ";
        display: block;
        width: 25px;
        height: 25px;
        background: url("https://handmadeshopyou.itembox.design/item/ic_login.svg") no-repeat;
        position: absolute;
        top: 25px;
        left: 45%;
    }
    .li_sub_nav_h li.contact a::after {
        content: " ";
        display: block;
        width: 25px;
        height: 25px;
        background: url("https://handmadeshopyou.itembox.design/item/ic_contact.svg") no-repeat;
        position: absolute;
        top: 25px;
        left: 44%;
    }
    .li_sub_nav_h li.cart a::after {
        content: " ";
        width: 25px;
        height: 25px;
        background: url("https://handmadeshopyou.itembox.design/item/ic_cart.svg") no-repeat;
        position: absolute;
        top: 25px;
        left: 44%;
    }
    .li_sub_nav_h li.hamburger a::after {
        content: " ";
        width: 25px;
        height: 25px;
        position: absolute;
        top: 25px;
        left: 44%;
    }
    .menuButton {
        display: block;
        height: 25px;
        width: 25px;
        position: fixed;
        top: 0;
        right: 0px;
        z-index: 100;
    }
    .menuButton div {
        height: 1px;
        width: 22px;
        background-color: #33272A;
        position: absolute;
        top: 50%;
        right: 35%;
        transform: translate(50%, 6px);
        transition: .3s;
    }
    .menuButton div:nth-of-type(1) {
        transform: translate(50%, -3px);
    }
    .menuButton div:nth-of-type(3) {
        transform: translate(50%, 15px);
    }
    .menuButton.active div:nth-of-type(1) {
        transform: rotate(45deg) translate(60%, -4px);
        transform-origin: 50% 50%;
    }
    .menuButton.active div:nth-of-type(2) {
        opacity: 0;
    }
    .menuButton.active div:nth-of-type(3) {
        transform: rotate(-45deg) translate(15%, 13px);
        transform-origin: 50% 50%;
    }
    /*SPドロワーメニュー*/
    #nav_h_sp {
        overflow: scroll;
        -ms-overflow-style: none;
        /* スクロールバー非表示　IE, Edge 対応 */
        scrollbar-width: none;
    }
    #nav_h_sp::-webkit-scrollbar {
        /* Chrome, Safari 対応 */
        display: none;
    }
    .nav_h_sp {
        opacity: 0;
        visibility: hidden;
        transform: scale(.95);
        position: fixed;
        top: 94px;
        z-index: 30;
        background-color: #FAEEE7;
        width: 100%;
        height: 90vh;
        transition: ease-out .3s;
    }
    .nav_h_sp.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1)
    }
    .nav_h_sp_box {
        margin: 10px 8px 130px 8px;
    }
    .li_nav_h_sp li {}
    .li_nav_h_sp li:not(:first-of-type) {
        margin-top: 20px;
    }
    .li_nav_h_sp li a {
        color: #FFFFFF;
        font-size: 20px;
    }
    .welcome_h {
        line-height: 1rem;
        font-size: 10px;
    }
    .area_bot_navi {
        background-color: #FAEEE7;
        line-height: 1rem;
        font-size: 10px;
        padding: 5px 0px;
    }
    .area_bot_navi ul {
        display: flex;
        justify-content: space-around;
    }
    .area_bot_navi li {}
    .area_bot_navi li a {
        background-color: #FADCCB;
        color: #33272A;
        font-weight: 600;
        border-radius: 0.2rem;
        padding: 3px 10px;
    }
    .area_bot_navi li a:last-child {
        margin-right: 0px;
    }
    .nav_sns_box {
        margin: 20px auto;
    }
    .nav_sns_box ul {
        display: flex;
        justify-content: center;
    }
    .nav_sns_box li {
        padding: 19px 15px 20px 15px;
    }
    .nav_sns_box li img {
        width: 31px;
        height: 31px;
    }
    /* SPドロワーメニュー */
    .search_h {
        padding-bottom: 30px;
    }
    .search_box {
        padding: 10px 32px 10px 5px;
        width: 70%;
        margin-top: 0;
        font-size: 14px;
    }
    button.search_bt {
        overflow: hidden;
        text-indent: -9999px;
    }
    .search_bt::before {
        content: " ";
        width: 20px;
        height: 20px;
        background: url("https://handmadeshopyou.itembox.design/item/ic_search.svg") no-repeat;
        display: block;
        position: absolute;
        text-indent: 0;
        top: 7px;
        left: 72%;
    }
    .nav_dr_sp {
        margin-top: 5px;
        font-size: 12px;
    }
    .nav_dr_sp p {
        font-size: 14px;
        font-weight: 900;
        margin: 15px 0 5px 0;
    }
    .nav_dr_sp--white,
    .nav_dr_sp--pink {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .nav_dr_sp--white>li {
        width: 49.5%;
        margin-bottom: 5px;
        background-color: #FFFFFF;
    }
    .nav_dr_sp--pink>li {
        width: 49.5%;
        margin-bottom: 5px;
        background-color: #FADCCB;
    }
    .nav_dr_sp--white>li a,
    .nav_dr_sp--pink>li a {
        color: #33272A;
        line-height: 1rem;
        display: block;
        padding: 10px 5px;
    }
    .nav_dr_sp--pink100 {
        width: 100% !important;
        position: relative;
    }
    .nav_dr_sp--white100 {
        width: 100% !important;
    }
    .nav_dr_sp--pink100::after {
        content: " ";
        display: block;
        width: 11px;
        height: 11px;
        background: url("https://handmadeshopyou.itembox.design/item/ic_arr_right.svg") no-repeat;
        position: absolute;
        top: 13px;
        left: 96%;
    }
    /*フッター*/
    footer {
        width: 100%;
        background-color: #594A4E;
        padding-bottom: 30px;
        margin-top: 120px;
    }
    .sns_box li {
        padding: 9px 15px 9px 15px;
    }
    .footer_box {
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 8% 15% 5% 15%;
        color: #FAEEE7;
        line-height: 1.4rem;
    }
    .shop_info,
    .footer_nav_m,
    .footer_nav_r {
        width: 100%;
    }
    .shop_cal {
        margin: 30px auto 0 auto;
        width: 100%;
        text-align: center;
    }
    .footer_nav_list {
        margin-top: 40px;
    }
}