@charset "utf-8";

/***********************************************/
/* トップページCSS
/***********************************************/
html {
    font-size: 62.5%;
    width: 100%;
}
body{
    color:#333;
    font-family: 'メイリオ','Meiryo','ＭＳ Ｐゴシック','Verdana';
    font-size: 1.6rem;
    line-height: 1.4;
    background-color: #fff;
}

/* 高さ&幅 */
.h60px         { height: 60px; }
.h100pers      { height: 100%; }
.h100vw_per_8  { height: calc(100vw / 8); }
.h100vw_per_8_add10px
               { height: calc(100vw / 8 + 10px); }
.max_h50px { max-height: 50px; }
.max_h60px { max-height: 60px; }
.w25vw          { width: 25vw; }
.min_w18px  { min-width: 18px; }
.max_w90px  { max-width: 90px; }
.max_w102px { max-width: 102px; }
.max_w950px { max-width: 950px; }
/* 重なり順 */
.z_index_mi10 { z-index: -10; }
.z_index10    { z-index: 10; }
.z_index20    { z-index: 20; }
.z_index100   { z-index: 100; }
/* 中央寄せ */
.center   { text-align: center; }
.m_center { margin: 0 auto; }
/* flex-box */
.just_con_fs  { justify-content: flex-start; }
.just_con_fe  { justify-content: flex-end; }
.just_con_sa  { justify-content: space-around; }
.just_con_sb  { justify-content: space-between; }
.align_it_cen { align-items: center; }
.align_it_fe  { align-items: flex-end; }
.flex_wrap_w  { flex-wrap: wrap; }
/* 距離 */
.top0        { top: 0; }
.top5px      { top: 5px; }
.top34px     { top: 34px; }
.right0      { right: 0; }
.right15px   { right: 15px; }
.right50px   { right: 50px; }
.right20pers { right: 20%; }
.bottom0     { bottom: 0; }
.bottom50px  { bottom: 50px; }
.left0       { left: 0; }
/* font-size */
.f10r { font-size: 1rem; }
.f12r { font-size: 1.2rem; }
.f13r { font-size: 1.3rem; }
.f14r { font-size: 1.4rem; }
.f15r { font-size: 1.5rem; }
.f18r { font-size: 1.8rem; }
/* 装飾系 */
.bgc_white  { background-color: #fff; }
.bgc_eee    { background-color: #eee; }
.bgc_f0f1f2 { background-color: #f0f1f2; }
.bgc_404142 { background-color: #404142; }
.bgc_f32    { background-color: #f32; }

.border_000_s_1 { border: #000 solid 1px; }
.border_b_fff_s_1 { border-bottom: #fff solid 1px; }

.border_r5px  { border-radius: 5px; }
.border_r10px { border-radius: 10px; }

.c999     { color: #999; }
.tx_color { color: #333; }

.fixed { position: fixed; }
.transi200s { transition: .2s; }
.transi300s { transition: .3s; }
.hidden { visibility: hidden; }

.pan_kuzu{
	margin-top:10px;
	padding:10px;
	background-color:#CCC;
}
#goods_history{
	margin:100px 0;
    text-align: center;
}
#goods_history h3{
	padding: 0 2%;
    color: #88c6e6;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 20px;
}
#goods_history h3 svg {
    width: 306px;
    margin-bottom: 5px;
}
#goods_history h3 svg .cls-1 {
    fill:#4c56a6;
}
.goods_history_frame{
	overflow-x:scroll;
	width:100%;
}
.goods_history_frame ul{
	list-style-type: none;
	display: inline-flex;
}
.goods_history_frame li{
	display: inline-block;
	padding: 15px;
	width: 200px;
    text-align: left;
    margin-right: 10px;
}
.goods_history_frame li:last-child {
    margin-right: 0;
}
.goods_history_frame li img{
	margin-bottom:10px;
	/*border:1px solid #F00;*/
	width: 100%;
}
.goods_history_frame li div:nth-child(2) {
    margin-bottom: 5px;
    line-height: 1.2;
}
.goods_history_frame li div:nth-child(2) a {
    color: #333;
}
.goods_history_frame li div:nth-child(3) {
    color: #777;
}
.relative{
	position:relative;
}

.header_cart_num{
    border-radius: 10px;
	background-color:#ff3267;
	color:#FFF;
	font-size:12px;
	padding:2px 5px;
	position:absolute;
	right:0px;
	top:-10px;
}

.orange { color:#f44e14; }

/* header */
@media (max-width: 639px) {
	.header_cart_num{
		right:10px;
		top:-5px;
	}

    .disp_pc {
        display: none;
    }
    .navi_item,
    .menu_close {
        width: calc(75vw / 4);
        background-size: 40%;
    }
    .menu_item {
        width: 32%;
        background-size: 28%;
    }
	.pan_kuzu{
		background-color:#FFF;
		margin-top:0px;
	}
    .navi_item,
    .menu_item,
    .menu_close {
        font-size: calc(1vw + 10%);
        background-position: center 20%;
        background-repeat: no-repeat;
    }
    .navi_item:nth-of-type(1) {
        background-image: url(../img/login.png);
        background-size: 37%;
    }
    .navi_item:nth-of-type(2) {
        background-image: url(../img/cart.png);
        margin-right: 12.5vw;
    }
    .navi_item:nth-of-type(3) {
        background-image: url(../img/search.png);
        margin-left: 12.5vw;
    }
    .navi_item:nth-of-type(4) {
        background-image: url(../img/menu.png);
    }

    .dropdown_icon:nth-of-type(1) {
        background-image: url(../img/use_guide.png);
        background-size: 18%;
    }
    .dropdown_icon:nth-of-type(2) {
        background-image: url(../img/stores_info.png);
    }
    .dropdown_icon:nth-of-type(3) {
        background-image: url(../img/inquiry.png);
    }
    .dropdown_menu {
        position: fixed;
        background: linear-gradient(#4955a3, #81c6e5);
        transform: translateY(-100%);
        transition-duration: .6s;
    }
    .dropdown_down {
        position: absolute;
        transform: translateY(0%);
        z-index: 5;
    }
    .goods_history_frame li{
	width: auto;
	}
    .goods_history_frame li img{
	width: 38vw;
    }
    #goods_history h3 {
        font-size: 16px;
        color: #88c6e6;
        font-weight: bold;
    }
    #goods_history h3 svg {
        width: 200px;
    }
    #goods_history h3 svg .cls-1 {
        fill:#4c56a6;
    }
}
@media (min-width: 640px) {
    .disp_mb {
        display: none;
    }
    .navi_link,
    .menu_close {
        background-size: 40%;
        font-size: 30%;
        background-position: center 35%;
        background-repeat: no-repeat;
    }
    .navi_link:nth-of-type(1) {
        background-image: url(../img/menu.png);
    }
    .navi_link:nth-of-type(2) {
        background-image: url(../img/use_guide.png);
        background-size: 30%;
    }
    .navi_link:nth-of-type(3) {
        background-image: url(../img/stores_info.png);
    }
    .navi_link:nth-of-type(4) {
        background-image: url(../img/inquiry.png);
    }
    .navi_link:nth-of-type(5) {
        background-image: url(../img/login.png);
    }
    .navi_link:nth-of-type(6) {
        background-image: url(../img/cart.png);
    }
    .store_pulldown_item:hover,
    .category_pulldown_item:hover {
        background-color: #eee;
        font-weight: bold;
    }
}

.menu_close {
    background-image: url(../img/close.png);
}
.navi .now_login {
    background-image: url(../img/login_blue.png);
    filter: hue-rotate(-35deg);
}
/* footer */
.copyright::before {
    content: "c";
    display: inline-block;
    transform: scale(.7);
}
/* ログイン画面 */
.login_back_area {
    background-color: rgba(0,0,0,.6);
    height: 100%;
    padding-top: 200px;
}
.login_item_input {
    border: #999 solid 1px;
}
/* アコーディオンarrow回転 */
.accordion_arrow_rotate {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
/* ページトップへ */
.to_page_top_link {
    background-color: rgba(80, 80, 80, .6);
    border-radius: 25px;
    width: 50px;
    height: 50px;
}
.to_page_top_link::after {
    content: "";
    border-right: 9px solid transparent;
    border-bottom: 18px solid #fff;
    border-left: 9px solid transparent;
    position: relative;
    top: -8px;
}

.header_serch_text{
	margin-top:15px;
}