@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0");

#main.globaltop_wrapper{
    padding-top:0;
}

#main #continue.search_result{
	padding-top:60px;
}


#header_fine{
    user-select: none;
    background-color:#000014;
    color:#f5f1e8;
}

#header_fine img{
	object-fit: contain
}

#header_fine form{
    position:relative;
    
}
#header_fine .poplink{
    position:absolute;
    top:40px;
    font-size:13px;
}

div.container{
    padding-top:112px;
}

#main>.content_area {
    margin-top: 112px;
}

#main #continue #sec_screen{
	margin-top: 112px;
}


#main.learning-content{
    padding-top:112px;
}

@media only screen and (max-width: 850px){
    div.container{
        padding-top:142px;
    }
    #sp_detail_footer{
        bottom:70px;
    }
	#main #continue #sec_screen{
		margin-top: 142px;
	}
    
    #main.learning-content{
        padding-top:142px;
    }
}

.poplink.sphs{
    display:none;
}

div.poplink > div.poplink_suggest > div.word {
  padding: 4px 8px;
}

div.poplink > div.poplink_suggest {
    border: none;
    background-color: rgba(0,0,20,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius:0 0 0 6px;
    
}

div.poplink > div.poplink_search {
    border: none;
    background-color: rgba(0,0,20,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius:0 0 6px 6px;
}

div.poplink > div.poplink_search > div.header {
  border: none;
  color: #f5f1e8;
  background-color: #d5b655;
  padding: 2px 5px;
    font-size:10px;
    font-weight:bold;
}

div.poplink > div.poplink_suggest > div.word:hover {
  background-color: rgba(211,219,222,0.12);
    font-weight:bold;
    border-radius:6px;
}

div.poplink > div.poplink_search > div.item:hover {
  background-color: rgba(211,219,222,0.12);
    border-radius:6px;
}

#header_fine .item{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:5px 8px;
    cursor:pointer;
    transition: opacity 160ms ease, color 160ms ease;
}

#header_fine .item.cart{
	position:relative;
}

#header_fine .poplink_search .item{
    display:block;
}

#header_fine .item>p{
    margin:0;
}

#global_wrap{
    position:fixed;
    width:100%;
    z-index:9;
	top:0;
}

#header_fine>div>.item{
    display:flex;
    flex-direction:column;
    align-items:center
}

#header_fine>div>.item.cart{
    position:relative;
}

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


#header_fine a:hover img{
    opacity:1;
}

#global_wrap *{
    box-sizing:border-box;
}

#main>.content_area {
    margin-top: 112px;
}

#header_fine{
    height:75px;
    background-color:#000014;
    border-bottom:solid 1px rgba(255,255,255,0.08);
    color:#f5f1e8;
    position:relative;
}

#header_fine>div{
    display:flex;
}

#header_fine .c_wrap .logo{
    width:340px;
    display:flex;
    align-items:center;
    justify-content:center;
}

#header_fine .c_wrap .logo a{
    display:flex;
    align-items:center;
    justify-content:center;
}

#header_fine .c_wrap .logo img{
    width:auto !important;
    max-width:100%;
    max-height:42px;
    height:auto;
}

#header_fine .l_wrap{
    position:absolute;
    top: 24px;
    left: 20px;
    z-index:2;
}

#header_fine .r_wrap{
    position:absolute;
    top: 16px;
    right: 20px;
    align-items:center;
    z-index:2;
}

#header_fine .fine-info-line {
    position:absolute;
    top:-18px;
    left:0;
    display:flex;
    align-items:center;
    gap:6px;
    width:560px;
    max-width:none;
    color:rgba(211,219,222,0.78);
    font-size:10px;
    line-height:1;
    letter-spacing:0.03em;
    white-space:nowrap;
}

#header_fine .fine-info-rank-icon {
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
}

#header_fine .fine-info-rank-icon > span {
    display:inline-flex;
    align-items:center;
}

#header_fine .fine-info-rank-icon img {
    display:block;
    width:13px;
    height:13px;
}

#header_fine .fine-info-line br {
    display:none;
}

#header_fine .fine-info-line .ml10 {
    margin-left: 4px;
}

#header_fine .c_wrap{
    position:absolute;
    top: 0;
    left: 50%;
    height:100%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1;
}

#header_fine .phone{
    font-size:17px;
    padding-left:27px;
    position:relative;
    letter-spacing:1px;
    cursor:pointer;
    color:#d5b655;
    font-family:"Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
}

#header_fine .phone::before{
    content: url('../images/menu/tel.svg');
    position:absolute;
    left:0;
    top:1px;
    filter: brightness(0) saturate(100%) invert(75%) sepia(44%) saturate(617%) hue-rotate(359deg) brightness(92%) contrast(86%);
}

#header_fine .phone:hover::before{
    animation: yureru-j 2s infinite;
}
@keyframes yureru-j {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

#header_fine .r_wrap .divider{
    display:block;
    width:1px;
    height:35px;
    background:rgba(255,255,255,0.18);
    margin-right:25px;
    margin-left:20px;
    margin-top:-3px;
    cursor:inherit;
}

#header_fine .item>p{
    font-size:10px;
    color:#d3dbde;
}

#header_fine .item.sale .icon{
    padding-bottom:3px;
}

#header_fine .item.login .icon>img{
    width:24px;
    height:24px;
}

#header_fine .item.home{
    display:none;
}

#header_fine .item.home .icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
}

#header_fine .item.home .home-symbol::before{
    content:"home";
    display:block;
    font-family:"Material Symbols Outlined";
    font-size:24px;
    line-height:1;
    color:#f5f1e8;
    font-variation-settings:
      "FILL" 1,
      "wght" 400,
      "GRAD" 0,
      "opsz" 24;
}

#header_fine .item.mypage .icon>img{
    width:24px;
    height:24px;
}

#header_fine .item.sale .icon>img{
    width:17px;
    height:20px;
}

#header_fine .item.cart .icon>img{
    width:24px;
    height:24px;
}

#header_fine .item.mypage .icon>img,
#header_fine .item.login .icon>img,
#header_fine .item.cart .icon>img,
#header_fine .item.search .icon>img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(171%) hue-rotate(176deg) brightness(94%) contrast(92%);
}

#header_fine .item.cart:hover .icon>img,
#header_fine .item.login:hover .icon>img,
#header_fine .item.search:hover .icon>img {
    filter: brightness(0) saturate(100%) invert(75%) sepia(44%) saturate(617%) hue-rotate(359deg) brightness(92%) contrast(86%);
}

#header_fine .item.mypage:hover .icon>img,
#header_fine .item.cart:hover .icon>img {
    filter: brightness(0) saturate(100%) invert(89%) sepia(12%) saturate(430%) hue-rotate(355deg) brightness(98%) contrast(92%);
}

#header_fine .item.search{
    display:none;
}

#header_fine .item.search .icon>img{
    width:24px;
    height:24px;
}

#header_fine .item .icon>img.active{
    display:none;
}

#header_fine .item:hover .icon>img.normal{
    display:none;
}

#header_fine .item:hover .icon>img.active{
    display:block;
}

#header_fine .item:hover p{
    font-weight:bold;    
}

#header_fine .item.mypage:hover p,
#header_fine .item.cart:hover p {
    color:#e9d7ae;
}

#header_fine .item .icon.ship_free{
    padding-bottom:3px;
}

#header_fine .item .icon.cart{
    margin-left:-5px;
}

#global_search_wrapper_flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:#000014;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:3px;
    padding:0 18px;
}

#global_search_wrapper_flex .search_btn{
    margin-right:-10px;
}

#global_search_wrapper_flex .search_btn>img{
    width:24px;
    height:24px;
    filter: brightness(0) saturate(100%) invert(75%) sepia(44%) saturate(617%) hue-rotate(359deg) brightness(92%) contrast(86%);
}

#global_search_wrapper_flex .search_btn>img.active{
    display:none;
}

#global_search_wrapper_flex .search_btn:hover>img.normal{
    display:none;
}

#global_search_wrapper_flex .search_btn:hover>img.active{
    display:block;
}

input#q{
    background:unset;
    width:200px;
    border:none;
	outline: none;
    color:#f5f1e8;
}

input#q::placeholder{
    color:rgba(245,241,232,0.62);
}

#header_fine .box_global_search-inner>form{
    display:flex;
    height:40px;
}

/*SP menu*/
#global_navi_sp{
    display:none;
}

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

#global_navi_sp a:hover img{
    opacity:1;
}

#global_navi_sp .item{
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    width:33.3%;
	position:relative;
}

#global_navi_sp>span{
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    width:33.3%;
}
#global_navi_sp>span>a.item{
    width:100%;
}

#global_navi_sp .item.close{
    display:none;
}

#global_navi_sp .item>p{
    font-size:10px;
    margin-bottom:0;
    color:#f5f1e8;
}

#global_navi_sp .item.sale .icon{
    padding-bottom:3px;
}

#global_navi_sp .item.mypage .icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
}

#global_navi_sp .item.mypage .icon>img{
    display:block;
    width:24px;
    height:24px;
}

#global_navi_sp .item.home .icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
}

#global_navi_sp .item.home .home-symbol::before{
    content:"home";
    display:block;
    font-family:"Material Symbols Outlined";
    font-size:24px;
    line-height:1;
    color:#f5f1e8;
    font-variation-settings:
      "FILL" 1,
      "wght" 400,
      "GRAD" 0,
      "opsz" 24;
}

#global_navi_sp .item.sale .icon>img{
    width:17px;
    height:20px;
}

#global_navi_sp .item.cart .icon>img{
    width:24px;
    height:24px;
}

#global_navi_sp .item.cart .icon>img{
    width:24px;
    height:24px;
}

#global_navi_sp .item.wine .icon>img{
    width:24px;
    height:24px;
}

#global_navi_sp .item.mypage .icon>img,
#global_navi_sp .item.login .icon>img,
#global_navi_sp .item.cart .icon>img {
    filter: brightness(0) saturate(100%) invert(98%) sepia(6%) saturate(447%) hue-rotate(317deg) brightness(110%) contrast(92%);
}

#global_navi_sp .item.wine .icon>img {
    filter: brightness(0) saturate(100%) invert(98%) sepia(6%) saturate(447%) hue-rotate(317deg) brightness(110%) contrast(92%);
}

#global_navi_sp .item .icon>img.active{
    display:none;
}

#global_navi_sp .item:hover .icon>img.normal{
    display:block;
}

#global_navi_sp .item:hover p{
    font-weight:bold;    
}

#global_navi_sp .item.login:hover .icon>img,
#global_navi_sp .item.wine:hover .icon>img {
    filter: brightness(0) saturate(100%) invert(89%) sepia(12%) saturate(430%) hue-rotate(355deg) brightness(98%) contrast(92%);
}

#global_navi_sp .item.mypage:hover .icon>img,
#global_navi_sp .item.cart:hover .icon>img {
    filter: brightness(0) saturate(100%) invert(89%) sepia(12%) saturate(430%) hue-rotate(355deg) brightness(98%) contrast(92%);
}

#global_navi_sp .item.login:hover p,
#global_navi_sp .item.wine:hover p {
    color:#d5b655;
}

#header_fine .item.home:hover .home-symbol::before,
#header_fine .item.home:hover p {
    color:#d5b655;
}

#global_navi_sp .item.mypage:hover p,
#global_navi_sp .item.cart:hover p {
    color:#d5b655;
}

#global_navi_sp .item.ship_free .icon{
    padding-bottom:3px;
}

#global_navi_sp .item.cart .icon{
    margin-left:-5px;
}

#global_navi_sp .item .close{
    display:none;
}

#header_fine div.tel_area{
    display:flex;
    position:absolute;
    background:linear-gradient(180deg, rgba(0,0,20,0.98) 0%, rgba(7,7,30,0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    top:100px;
    width:170px;
    right:14px;
    top:67px;
    justify-content:center;
    align-items:center;
    border-radius:8px;
    color:#f5f1e8;
    border:1px solid rgba(240,196,106,0.14);
}


#header_fine div.tel_area {
    display: none;
    opacity:0;
    transition: opacity 200ms;
    transition: opacity 200ms ease-out, height 0ms ease-out 300ms;
    z-index:1;
    line-height:1.7;
    padding:12px 14px;
}

#header_fine div.tel_area.show {
	display: flex;
    opacity: 1;
    transition: opacity 200ms ease-out;
	box-shadow:0px 8px 22px rgba(0,0,0,0.34);
}

#header_fine .tel_comment {
    width:100%;
}

#header_fine .tel_comment p {
    margin:0;
    color:rgba(211,219,222,0.92);
    font-size:11px;
    line-height:1.75;
    letter-spacing:0.05em;
    text-align:center;
}

#header_fine .tel_comment span {
    display:block;
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,0.08);
    color:rgba(211,219,222,0.62);
    font-size:10px;
    line-height:1.7;
    letter-spacing:0.04em;
}

div.poplink.sphs > div.poplink_suggest > div.word.highlighted {
  background-color: #6ba534;
  border: 1px solid #6ba534;
}
div.poplink.sphs > div.poplink_suggest > div.word.highlighted:after {
  border-color: #6ba534 transparent transparent transparent;
}
div.poplink.sphs > div.poplink_search {
  border: 3px solid #6ba534;
}

#global_navi_sp ._noitem .header_cart_num {
	display:none;
}

#global_navi_sp .header_cart_num {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 2;
	top: -3px;
    left: 48%;
    margin-left: 6px;
	min-width: 13px;
	min-height: 13px;
	border-radius: 13px;
	background: #d5b655;
	padding: 0 0 0 0px;
	font-size: 11px;
	color: #111111;
    font-weight:bold;
	line-height: 1
}

#header_fine .header_cart_num {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 2;
	top:3px;
    left:27px;
	min-width: 13px;
	min-height: 13px;
	border-radius: 13px;
	background: #d5b655;
	padding: 0 0 0 -1px;
	font-size: 11px;
	color: #111111;
    font-weight:bold;
	line-height: 1
}

#header_fine ._noitem .header_cart_num {
	display: none
}

#main.cart{
	padding-top:112px;
}


@media only screen and (max-width: 850px){
	#main #continue.search_result{
		padding-top:90px;
	}
	
	#main.club30_top{
		padding-top:142px;
	}
	
	#main.cart{
		padding-top:142px;
	}

    #header_fine div.tel_area {
        z-index:-1;
    }
    .poplink.sphs{
        display:block;
    }
    #global_navi_sp{
        display:flex;
        align-items:center;
        position:fixed;
        width:100%;
        height:60px;
        bottom:0;
        background-color:#000014;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color:#f5f1e8;
        border-top:1px solid rgba(255,255,255,0.08);
    }
    
    #header_fine>div .item.mypage{
        display:none;
    }
    
    #header_fine>div>.item.cart{
        display:none;
    }

    #header_fine>div .item.login{
        display:none;
    }

    #header_fine>div>.item.sale{
        display:none;
    }

    #header_fine>div>.phone{
        display:none;
    }

    #header_fine .r_wrap .divider{
        display:none;
    }
    
    #main>.content_area {
        margin-top: 142px;
    }
    
    #global_search_wrapper{
        display:block;
        position:absolute;
        top:70px;
        z-index:1;
    }

    #global_search_wrapper_flex{
        flex-direction:row;
    }

    input#q{
        background:unset;
        width:calc(100vw - 95px);
    }

    #search_sp_background{
        width:100%;
        height:70px;
        background-color:#000014;
        position:relative;
        z-index:1;
    }
    #header_fine .item.search{
        display:flex;
        position:relative;
        z-index:3;
    }

    #header_fine .item.search .close{
        display:none;
    }
    #header_fine div.poplink.sphs > div.poplink_search .item a{
        display:flex;
        flex-direction:row;
        justify-content:start;
        align-items:center;
        gap:20px;
    }
    div.poplink.sphs > div.poplink_search > div.item > a > div.image_box {
      margin-bottom: 0;
    }
    div.poplink.sphs > div.poplink_search > div.item > a > div.image_box > img {
      max-width: 120px;
      max-height: 120px;
        width:68px;
        height:100%;
    }
    div.poplink.sphs > div.poplink_search > div.item > a > div.title{
        font-size:12px;
    }
    div.poplink > div.close_button{
        top:40px;
        left: calc(100% - 56px);
    }
    div.poplink.sphs > div.poplink_search {
        border:none;
        background-color: rgba(0,0,20,0.35);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        overflow-y: scroll-y;
        max-height: calc(100vh - 170px);
        
    }
    div.poplink.sphs > div.poplink_search > div.item {
      background-color: rgba(0,0,20,0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
    }
    div.poplink.sphs > div.poplink_search > div.item:hover {
      background-color: rgba(211,219,222,0.12);
      border: none;
    }
    #header_fine #box_global_search div.poplink.sphs>div.poplink_search .item {
        width: 100%;
        height: auto;
        min-height: auto;
        margin: 0 0 4px;
        overflow: visible;
        border-radius:6px;
    }
    #header_fine .poplink{
        position:absolute;
        top:43px;
        font-size:13px;
        margin-left:-40px;
        width:calc(100% + 95px)
    }
    div.poplink.sphs > div.poplink_suggest > div.word {
        border-radius:6px;
        margin:4px;
        margin-bottom:6px;
    }
    #header_fine .poplink{
        margin-left:-40px;
        width:calc(100% + 95px)
        
    }

    #header_fine .poplink.pc022{
        display:none;
    }
	
	#header_fine .item.cart{
		display:none;
	}

}

#header_fine .rank_icon img{width: 26px;height: 26px;}
/*#header_fine .item.rank{padding-top: 0px;}*/
#global_navi_sp .rank_icon img{width: 30px;height: 30px;}
.rank_point{color: rgba(211,219,222,0.78); font-weight: bold; font-size: 10px; line-height: 1.5;}
.sp_rank{display: none;}
.tab_rank{display: none;}
.ml10{margin-left: 10px;}
@media screen and (max-width:850px) {
    #header_fine .fine-info-line{display:none;}
    .sp_rank{display: block;}
    .pc_rank{display: none;}
	.tab_rank{display: none;}
    .rank_point_bottom{position: fixed; width: 100%; bottom: 60px; background-color: rgba(0, 0, 20, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 5px 0; text-align: center; border-top:1px solid rgba(211,219,222,0.1);}
}

@media screen and (min-width: 850px) and (max-width: 1200px) {
    #header_fine .fine-info-line{display:none;}
    .tab_rank{display: block; background: #000014; color: rgba(211,219,222,0.78); text-align: center; padding: 7px 0; border-bottom: solid 1px rgba(211,219,222,0.1);}
    .pc_rank{display: none;}
    div.container,#main.cart{padding-top: 142px;}
  }

@media screen and (max-width:850px) {
    #header_fine{
        height:70px;
    }

    #header_fine .item.home{
        display:flex;
    }

    #header_fine .c_wrap{
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events:none;
    }

    #header_fine .c_wrap .logo{
        width: 200px;
        margin: 0 auto;
        text-align: center;
    }

    #header_fine .c_wrap .logo a{
        pointer-events:auto;
    }

    #header_fine .c_wrap .logo img{
        width: auto !important;
        height: auto;
        max-width: 100%;
        max-height: 36px;
    }

    #header_fine .l_wrap{
        top: 15px;
        left: 14px;
    }

    #header_fine .r_wrap{
        top: 15px;
        right: 14px;
    }
}
