﻿@charset "utf-8";

.item_detail_block {
	display:grid;
	grid-auto-flow:column;
	grid-template-rows: repeat(2,auto);
	grid-template-columns: 64% 32%;
	align-items: start;
	column-gap:4%;
	margin-top:20px; padding:0 10px;position:relative;
}
.item_info_note { font-size:0.9rem; }
.item_info_cart { position:sticky; top:20px; }

@media only screen and (max-width: 960px) {
	.item_detail_block { display:flex; flex-wrap:wrap; }
	.item_info_view { flex:0 0 100%; order:1; }
	.item_info_note { flex:0 0 100%; order:3; }
	.item_info_cart { flex:0 0 100%; order:2; margin-top:20px; position:relative; }
}


.item_detail_block h2.item_name { margin:0 0 20px 0; font-size:2.0rem; line-height:1.2; } 
.item_detail_block .status { display:block; }
.item_detail_block .status .new,
.item_detail_block .status .sale {
	display:inline-block; width:46px; height:24px; margin-right:6px;
	background-image: var(--icon-newmark);
	background-position:right top;
	background-repeat: no-repeat;
	background-size:contain;
	z-index:50;
}
.item_detail_block .status .sale { background-image: var(--icon-salemark); }
@media only screen and (max-width: 767px) {
	ul.slide_view_items .new,
	ul.slide_view_items .sale { width:30px; }
}


/* ----- main image slider ----- */
@media only screen and (max-width: 960px) {
	.item_info_view { 	min-height:0;min-width:0; }
}
.item_main_image { margin-bottom: 20px; }
.item_main_image .main_slider { margin-bottom: 20px; }
.item_main_image .main_slider img {
	width:80%;
	height:560px;
	object-fit: contain;
}
@media only screen and (max-width: 767px) {
	.item_main_image .main_slider img {	width:80%; height:360px; }
}
.main_thumbnails .slick-track { transform: unset !important; display:flex; flex-wrap:wrap; }
.main_thumbnails .item_thumb {
	opacity: 0.3; transition: opacity .3s linear;
	flex:0 0 65px; aspect-ratio: 1 / 1; display:flex; align-items:center; padding:10px;
}
.main_thumbnails .item_thumb img { max-height:45px; object-fit: contain; }
.main_thumbnails .slick-current { opacity: 1; }





/* ----- item info ----- */
p.item_comment { max-width:90%; margin:20px auto 0 auto; }

ul.allergen_list { margin:0 0 0 10px; padding:0; list-style:none; }
ul.allergen_list li {
	display:inline-block; padding:2px 15px; margin-left:10px; white-space:nowrap;
	border:1px var(--bf-border-dark) solid; border-radius:4px;
}



h3.item_info_title {
	margin: 60px 0 20px 0;
	padding: 6px;
	border-bottom: 1px var(--bf-border-dark) solid;
	font-size:1.3rem;
	font-weight:var(--bf-fontw3);
}
table.nutrition { width:90%; margin:0 auto; border-collapse:collapse; }
table.nutrition caption { caption-side:top; text-align:right; }
table.nutrition th, table.nutrition td {
	padding:10px; line-height:1.2;
	border:1px var(--bf-border-light) solid;
	text-align:center;
}
table.nutrition th { background-color:#eee; font-weight:var(--bf-fontw2); }







/* ----- cart block ----- */
.item_info_cart .cart_box {
	padding: 25px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	text-align:center;
}
@media only screen and (max-width: 960px) {
	.item_info_cart .cart_box { padding:25px 0; box-shadow:none; border-top:1px var(--bf-border-light) solid; border-radius:0; }
}
.item_info_cart .price_name { margin-bottom:12px; font-size:1.1rem; line-height:1.2; font-weight:var(--bf-fontw2); text-align:left; }
.item_info_cart .price_box { padding:0 0 8px 0; font-size:1.6rem; font-weight:var(--bf-fontw2); color:var(--bf-price); text-align:right; }
.item_info_cart .price_box span.tax { font-size:60%; color:var(--bf-text); font-weight:var(--bf-fontw2); }


.cart_set { text-align:center; display:flex; justify-content:space-between; align-items:flex-end; }
.cart_set .kosuu { flex:0 0 40px; font-size:0.7rem;  }
.cart_set .kounyu { flex:0 0 calc(100% - 55px); }
@media only screen and (max-width: 960px) {
	.cart_set { justify-content:center; }
	.cart_set .kounyu { flex:0 1 260px; padding-left:15px; }
}
.cart_set select {
	appearance:none; margin:5px 0 0 0; padding: 0; background: none; border: none; border-radius: 0; text-decoration: none; outline: none;
	width: 40px; border: 1px var(--bf-border-dark) solid; padding: 3px; cursor: pointer; text-indent: 0.2em; line-height:44px;
}
.cart_bt, button.cart_bt {
	display:block;
	width:100%; max-width:260px; margin:0 auto; padding:0;
	background-color:var(--bf-btbg); border: none; cursor:pointer;
	text-align:center; color:var(--bf-btcolor);
	border:none; border-radius:6px;
	font-size:0.9em; line-height:1;
	padding:20px 0;
	transition-duration:0.2s;
}
.cart_bt span, button.cart_bt span {
	padding-left:2em;
	background-image: var(--icon-cart-wht);
	background-position:left center;
	background-repeat: no-repeat;
	background-size:1.25em; line-height:1;
}
.cart_bt:hover, button.cart_bt:hover { background-color:var(--bf-btbg-hover); color:var(--bf-btcolor); }

.item_info_cart .cart_notice { display:inline-block; margin:20px auto; font-size:0.8rem; line-height:1.8; text-align:left; }
.item_info_cart .cart_notice a { text-decoration:underline; }


.essential_link { margin:0; padding:10px 15px; background-color:#f8f8f8; border-radius:8px; text-align:left; }
.essential_link ul { margin:0; padding:0;  list-style:none;  font-size:0.9rem; }
.essential_link ul li a {
	display:inline-block; padding-left:15px;
	background-image:var(--icon-arrow-right);
	background-position:left center;
	background-repeat:no-repeat;
	background-size:6px;
}

/* ----- footer cart button ----- */
.sp_onecart {
	position:fixed; bottom:0; width:100%; padding:10px 0 20px 0;
	background-color:rgba(255,255,255,1); border-top:1px var(--bf-border-light) solid; border-bottom:1px var(--bf-border-light) solid;
	text-align:center;
	z-index:75;
}
.sp_onecart .price_name { margin-bottom:8px; font-size:0.9rem; line-height:1.2; font-weight:var(--bf-fontw2); }
.sp_onecart .price_box { padding:0 0 8px 0; font-size:1.2rem; font-weight:var(--bf-fontw2); color:var(--bf-price); }
.sp_onecart .price_box span.tax { font-size:60%; color:var(--bf-text); font-weight:var(--bf-fontw2); }
.sp_onecart .cart_set { justify-content:center; }
.sp_onecart	.cart_set .kounyu { flex:0 1 280px; }
.sp_onecart button.cart_bt { padding:16px 0; }




/* ----- add contents ----- */
h4.category_listed { margin:80px 0 10px 10px; padding:8px; background-color:#f0f0f0; font-size:1.2rem; font-weight:var(--bf-fontw2); }
ul.page_category_menulist { display:flex; flex-wrap:wrap; margin:0 0 40px 0; padding:0; list-style:none; line-height:1.2; }
ul.page_category_menulist li { flex:0 0 16.66%; padding:5px; font-size:0.8rem; }
ul.page_category_menulist li a { display:flex; flex-wrap:wrap; height:100%; border:1px var(--bf-border-light) solid; border-radius:8px; padding:10px; }
ul.page_category_menulist li a .cate_img { flex:0 0 100%; height:70px; margin-bottom:6px; }
ul.page_category_menulist li a .cate_img img { max-height:100%; }
ul.page_category_menulist li a .cate_name { flex:0 0 100%; text-align:center; }
ul.page_category_menulist li a:hover { background-color:var(--bf-bg-hover); }
@media only screen and (max-width: 960px) { ul.page_category_menulist li { flex:0 0 20%; } }
@media only screen and (max-width: 767px) { ul.page_category_menulist li { flex:0 0 33.33%; } }



/* ----- slide items ----- */
ul.slide_view_items { margin:0; padding:0; list-style:none; }
ul.slide_view_items li { position:relative; padding:0 5px; }

ul.slide_view_items li .item_img { position:relative; aspect-ratio: 1 / 1; max-height:320px; padding:16px 8px 0px 8px; margin:0 auto; }
ul.slide_view_items li .item_img img {
	position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
	max-height:90%; max-width:85%;
}
ul.slide_view_items .name_box {
	display:flex; justify-content:center; align-items:center;
	max-width:80%; height:3.9em;
	margin:0 auto; padding:0;
	font-size:0.8rem; line-height:1.3; font-weight:var(--bf-fontw1);
}
ul.slide_view_items .name_box span {
	display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	overflow: hidden;
	word-break:break-all;
}
ul.slide_view_items .price_box { padding:0; font-size:1.1rem; font-weight:var(--bf-fontw2); color:var(--bf-price); text-align:center; }
ul.slide_view_items .price_box span.tax { font-size:60%; color:var(--bf-text); font-weight:var(--bf-fontw2); }
ul.slide_view_items button.cart_bt { padding:12px 0; font-size:0.7rem; }

/* status */
ul.slide_view_items .status { display:block; position:absolute; left:0; top:0; width:95%; z-index:10; }
ul.slide_view_items.ranklist .status { left:61px; width:calc(95% - 61px); }
@media only screen and (max-width: 767px) { ul.slide_view_items.ranklist .status { left:42px; width:calc(95% - 42px); } }

ul.slide_view_items .new,
ul.slide_view_items .sale {
	display:inline-block; width:46px; height:46px; margin-right:6px;
	background-image: var(--icon-newmark);
	background-position:right top;
	background-repeat: no-repeat;
	background-size:contain;
	z-index:50;
}
ul.slide_view_items .sale { background-image: var(--icon-salemark); }
@media only screen and (max-width: 767px) {
	ul.slide_view_items .new,
	ul.slide_view_items .sale { width:30px; }
}



/* ========== category list page ========== */
.listpage_section { display:flex; flex-wrap:wrap; justify-content:space-between; padding:0 10px; }
.listpage_section .listpage_list { flex:0 0 73%; order:2; }
.listpage_section .listpage_caetgory { flex:0 0 23%; order:1; }
@media only screen and (max-width: 1024px) {
	.listpage_section .listpage_list { flex:0 0 100%; order:1; }	
.listpage_section .listpage_caetgory { flex:0 0 100%; order:2; }
}

@media only screen and (min-width: 1024px) {

	.listpage_caetgory ul.page_category_menulist { display:block; margin:0; padding:0; list-style:none; line-height:1.2; }
	.listpage_caetgory ul.page_category_menulist li { padding:0; border-top:1px var(--bf-border-light) solid; font-size:0.9rem; }
	.listpage_caetgory ul.page_category_menulist li:last-child { border-bottom:1px var(--bf-border-light) solid; }
	.listpage_caetgory ul.page_category_menulist li a {
		border:none; border-radius:0;
		background-image: var(--icon-arrow-right);
		background-position:right 8px center;
		background-repeat: no-repeat;
		background-size: 6px;
		padding:0;
	}

	.listpage_caetgory ul.page_category_menulist li a { display:flex; align-items:center; }
	.listpage_caetgory ul.page_category_menulist li a .cate_img { flex:0 0 70px; height:70px; padding:10px; display:flex; align-items:center; }
	.listpage_caetgory ul.page_category_menulist li a .cate_img img { max-height:100%;  }
	.listpage_caetgory ul.page_category_menulist li a .cate_name { flex:1 1 100px; padding:0 20px 0 10px; text-align:left; }
	.listpage_caetgory ul.page_category_menulist li a:hover { background-color:var(--bf-bg-hover); }
}


ul.listed_view_items { display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
ul.listed_view_items li { flex:0 0 25%; position:relative; padding:20px; margin-bottom:20px; }
@media only screen and (max-width: 768px) {
	ul.listed_view_items li { flex:0 0 50%; padding:10px; }
}
ul.listed_view_items li .item_img { position:relative; aspect-ratio: 1 / 1; max-height:320px; padding:16px 8px 0px 8px; margin:0 auto; }
ul.listed_view_items li .item_img img {
	position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
	max-height:90%; max-width:85%;
}
ul.listed_view_items .name_box {
	display:flex; justify-content:center; align-items:center;
	max-width:80%; height:3.9em;
	margin:0 auto; padding:0;
	font-size:0.8rem; line-height:1.3; font-weight:var(--bf-fontw1);
}
ul.listed_view_items .name_box span {
	display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	overflow: hidden;
	word-break:break-all;
}
ul.listed_view_items .price_box { padding:0; font-size:1.1rem; font-weight:var(--bf-fontw2); color:var(--bf-price); text-align:center; }
ul.listed_view_items .price_box span.tax { font-size:60%; color:var(--bf-text); font-weight:var(--bf-fontw2); }
ul.listed_view_items button.cart_bt { padding:12px 0; font-size:0.7rem; }

/* status */
ul.listed_view_items .status { display:block; position:absolute; left:0; top:0; width:95%; z-index:10; }
ul.listed_view_items.ranklist .status { left:61px; width:calc(95% - 61px); }
@media only screen and (max-width: 767px) { ul.listed_view_items.ranklist .status { left:42px; width:calc(95% - 42px); } }

ul.listed_view_items .new,
ul.listed_view_items .sale {
	display:inline-block; width:46px; height:46px; margin-right:6px;
	background-image: var(--icon-newmark);
	background-position:right top;
	background-repeat: no-repeat;
	background-size:contain;
	z-index:50;
}
ul.listed_view_items .sale { background-image: var(--icon-salemark); }
@media only screen and (max-width: 767px) {
	ul.listed_view_items .new,
	ul.listed_view_items .sale { width:30px; }
}









/* common style overwrite */
#pages.itempage .pageTop { display:none; }


/* slick build */
ul.slide_banner, ul.slide_view_items { visibility:hidden; max-height: 360px; overflow:hidden; }
ul.slide_banner.slick-initialized,
ul.slide_view_items.slick-initialized { visibility:visible; max-height:none; overflow:visible; }

.slick-prev, .slick-next, .slick-next:hover, .slick-prev:hover {
    position: absolute;
    z-index: 30;
    top: 50%;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    background-size:contain;
    background-repeat:no-repeat;
    text-indent:-9999px;
}
.box_parts .slick-next { right: 10px;}
.box_parts .slick-prev { left: 10px; }
.slick-prev, .slick-next, .slick-next:hover, .slick-prev:hover { width:40px; height:40px; top: 40%; transition-duration:0.2s; }
.slick-next, .slick-next:hover,
.slick-prev, .slick-prev:hover { opacity: 0.7; }
.slick-next, .slick-next:hover { right: 10px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNC4wMiAzNC4wMiI+PHBhdGggZD0iTTM0LjAyLDE3LjAxYzAsOS4zOS03LjYyLDE3LjAxLTE3LjAxLDE3LjAxUzAsMjYuNCwwLDE3LjAxLDcuNjIsMCwxNy4wMSwwczE3LjAxLDcuNjIsMTcuMDEsMTcuMDEiIGZpbGw9IiMyMzE4MTUiLz48cG9seWdvbiBwb2ludHM9IjI3LjQgMTcuMDEgMTEuNzMgNy4yNSAxMS43MyAyNi43NiAyNy40IDE3LjAxIiBmaWxsPSIjZmZmIi8+PC9zdmc+"); }
.slick-prev, .slick-prev:hover { left: 10px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNC4wMiAzNC4wMiI+PHBhdGggZD0iTTAsMTcuMDFDMCw3LjYyLDcuNjIsMCwxNy4wMSwwczE3LjAxLDcuNjIsMTcuMDEsMTcuMDEtNy42MiwxNy4wMS0xNy4wMSwxNy4wMVMwLDI2LjQsMCwxNy4wMSIgZmlsbD0iIzIzMTgxNSIvPjxwb2x5Z29uIHBvaW50cz0iNi42MSAxNy4wMSAyMi4yOSAyNi43NiAyMi4yOSA3LjI1IDYuNjEgMTcuMDEiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); }
.slick-next:not(.slick-disabled):hover { opacity:1 !important; }
.slick-prev:not(.slick-disabled):hover { opacity:1 !important; }
.slick-disabled { display:none !important; }
.slick-dots { bottom:-30px; }
.slick-dots li button::before { font-size:10px; }




