﻿@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; } 
@media only screen and (max-width: 767px) {
	.item_detail_block h2.item_name { font-size:1.7rem; } 
}
.item_detail_block .status { display:block; }
.item_detail_block .status .new,
.item_detail_block .status .sale,
.item_detail_block .status .gentei {
	display:inline-block; width:48px; height:48px; 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); }
.item_detail_block .status .gentei { background-image: var(--icon-genteimark); }
@media only screen and (max-width: 767px) {
	.item_detail_block .status .new,
	.item_detail_block .status .sale,
	.item_detail_block .status .gentei { width:30px; height: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%;
	max-height:480px;
	object-fit: contain;
}
@media only screen and (max-width: 767px) {
	.item_main_image .main_slider img {	width:80%; max-height:320px; }
}
.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; }
.main_thumbnails img { cursor:pointer; }

.slick-slide { font-size:0.9rem; text-align:center; font-family:var(--font-gothic); }
.main_thumbnails .slick-slide { font-size:0.7rem; text-align:center; font-family:var(--font-gothic); word-break:break-all; }



/* ----- item info ----- */
p.item_comment { max-width:90%; margin:40px auto 0 auto; }

ul.allergen_list { margin:0; padding:0; list-style:none; }
ul.allergen_list li {
	display:inline-block; padding:2px 15px; margin-right:10px; white-space:nowrap;
	border:1px var(--border-dark) solid; border-radius:4px;
}



h3.item_info_title {
	margin: 60px 0 20px 0;
	padding: 6px;
	border-bottom: 1px var(--border-dark) solid;
	font-size:1.3rem;
	font-weight:var(--fontw2);
}
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(--border-light) solid;
	text-align:center;
}
table.nutrition th { background-color:#eee; font-weight:var(--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:0 0 25px 0; box-shadow:none;
	border-bottom:1px var(--border-light) solid;

	border-radius:0; }
}
.item_info_cart .price_name { margin-bottom:12px; font-size:1.4rem; line-height:1.2; font-weight:var(--fontw2); text-align:left; }
.item_info_cart .price_box { padding:0 0 15px 0; font-size:2rem; font-weight:var(--fontw2); color:var(--price); text-align:right; }
.item_info_cart .price_box span.tax { font-size:60%; color:var(--text); font-weight:var(--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 85%; 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(--border-dark) solid; padding: 3px; cursor: pointer; text-indent: 0.2em; line-height:44px;
	color:#000;
}
.cart_bt, button.cart_bt {
	display:block;
	width:100%;
	margin:0 auto; padding:0;
	background-color:var(--btbg); border: none; cursor:pointer;
	text-align:center; color:var(--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:1.75em;
	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(--btbg-hover); color:var(--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; }


.related_items { }
.inpage_catelist { }
.recent_items { }

.inpage_catelist h4.category_listed,
.recent_items h4.category_listed { margin-top:40px; }

.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(--border-light) solid; border-bottom:1px var(--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(--fontw2); }
.sp_onecart .price_box { padding:0 0 8px 0; font-size:1.2rem; font-weight:var(--fontw2); color:var(--price); }
.sp_onecart .price_box span.tax { font-size:60%; color:var(--text); font-weight:var(--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 10px 10px 10px; padding:6px 8px; background-color:var(--title-bg); font-size:1.0rem; font-weight:var(--fontw2); }
@media only screen and (max-width: 960px){
	.inpage_catelist h4.category_listed { margin:80px 0 10px 0; }
}
.inpage_catelist ul.category_menulist { display:flex; flex-wrap:wrap; padding:0; list-style:none; line-height:1.2; }
.inpage_catelist ul.category_menulist>li { flex:0 0 calc(20% - 16px); margin:0 8px; font-size:0.8rem; border-bottom:1px var(--border-light) solid;  }
.inpage_catelist ul.category_menulist>li a,
.inpage_catelist ul.category_menulist>li span { display:flex; cursor:pointer; padding:5px; align-items:center; }
.inpage_catelist ul.category_menulist li a .cate_img,
.inpage_catelist ul.category_menulist li span .cate_img { flex:0 0 40%; }
.inpage_catelist ul.category_menulist li a .cate_img img,
.inpage_catelist ul.category_menulist li span .cate_img img { max-height:60px; margin:0 auto; }
.inpage_catelist ul.category_menulist li a .cate_name,
.inpage_catelist ul.category_menulist li span .cate_name { flex:1 0 40%; text-align:center; font-weight:var(--fontw1); font-size:120%; }
.inpage_catelist ul.category_menulist li a:hover { background-color:var(--bg-hover); }
.inpage_catelist ul.category_menulist ul { margin:0; padding:10px; list-style:none; }
.inpage_catelist ul.category_child_menulist { list-style:none; display:none; }
.inpage_catelist ul.category_menulist li a,
.inpage_catelist ul.common_menulist li a {
	background-image: var(--icon-arrow-right);
	background-position:right 10px center;
	background-repeat: no-repeat;
	background-size: 6px;
	padding:0; border-radius:0;
}
.inpage_catelist ul.category_menulist li span .cate_name {
	cursor: pointer;
	background-image: var(--icon-plusmark);
	background-position: right 4px center;
	background-repeat: no-repeat;
	background-size: 10px;
}
.inpage_catelist ul.category_menulist>li span.active .cate_name {
	background-image: var(--icon-minusmark);
}
.inpage_catelist .common_menulist { display:none; }
.inpage_catelist ul.category_child_menulist li a {
	padding:6px 20px 6px 4px; line-height:1.6; margin-bottom:4px;
}
@media only screen and (min-width: 961px) {
	.listpage .inpage_catelist ul.category_menulist li span .cate_name { background-image: none; }
	.listpage .inpage_catelist ul.category_menulist>li span.active .cate_name { background-image: none; }
}
@media only screen and (max-width: 960px) { .inpage_catelist ul.category_menulist>li { flex:0 0 calc(100% - 16px); } }
@media only screen and (max-width: 767px) { .inpage_catelist ul.category_menulist>li { flex:0 0 calc(100% - 16px); } }
@media only screen and (max-width: 575px) {
	.inpage_catelist ul.category_menulist>li { flex:0 0 calc(100% - 16px); }
	.inpage_catelist ul.category_menulist li a .cate_img,
	.inpage_catelist ul.category_menulist li span .cate_img { flex:0 0 25%; }
}




/* ----- 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 0px 0px 0px; 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:90%;
}
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(--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(--fontw2); color:var(--price); text-align:center; }
ul.slide_view_items .price_box span.tax { font-size:60%; color:var(--text); font-weight:var(--fontw2); }
ul.slide_view_items button.cart_bt { padding:12px 0; font-size:0.7rem; max-width:80%; }
@media only screen and (max-width: 767px) {
	ul.slide_view_items button.cart_bt { max-width:120px; }
}

/* status */
ul.slide_view_items .status { display:block; position:absolute; left:0; top:0; width:95%; z-index:10; text-align:left; }
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,
ul.slide_view_items .gentei {
	display:inline-block; width:36px; height:36px; 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); }
ul.slide_view_items .gentei { background-image: var(--icon-genteimark); }
@media only screen and (max-width: 767px) {
	ul.slide_view_items .new,
	ul.slide_view_items .sale,
	ul.slide_view_items .gentei { width:30px; height: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 100%; order:2; }
.listpage_section .listpage_caetgory { flex:0 0 0%; order:1; }



@media only screen and (max-width: 960px) {
	.listpage_section .listpage_list { flex:0 0 100%; order:1; }	
	.listpage_section .listpage_caetgory { flex:0 0 100%; order:2; }
}
h2.listed_name { font-weight:var(--fontw2); }




/* ------　category list block ----- */
.itempage .inpage_catelist { padding-bottom:1px; /* include box adjust */ }
@media only screen and (min-width: 961px) {

	.inpage_itemlist ul.category_menulist,
	.inpage_itemlist ul.common_menulist { display:block; margin:0 0 0 0; padding:0; list-style:none; line-height:1.2; font-size:0.9rem; }
	.inpage_itemlist ul.category_menulist li,
	.inpage_itemlist ul.common_menulist li { border:none; padding:0; border-top:1px var(--border-light) solid; border-radius:0; margin:0; font-size:0.9rem; }
	.inpage_itemlist ul.category_menulist li:last-child,
	.inpage_itemlist ul.common_menulist li:last-child { border-bottom:1px var(--border-light) solid; }

	.inpage_itemlist ul.category_menulist li a,
	.inpage_itemlist ul.common_menulist li a {
		background-image: var(--icon-arrow-right);
		background-position:right 8px center;
		background-repeat: no-repeat;
		background-size: 6px;
		padding:0; border-radius:0;
	}

	.inpage_itemlist .linkmenu_block+.linkmenu_block ul { margin-top:0; }

	.inpage_itemlist ul.category_menulist ul { padding:0; }
	.inpage_itemlist ul.category_menulist li a,
	.inpage_itemlist ul.category_menulist li>span { display:flex; align-items:center; padding:0; }
	.inpage_itemlist ul.category_menulist>li span { cursor:default; padding-bottom:0; }
	.inpage_itemlist ul.category_menulist li a .cate_img,
	.inpage_itemlist ul.category_menulist li>span .cate_img { flex:0 0 70px; height:70px; padding:10px; display:flex; align-items:center; }
	.inpage_itemlist ul.category_menulist li a .cate_img img,
	.inpage_itemlist ul.category_menulist li>span .cate_img img { max-height:100%;  }
	.inpage_itemlist ul.category_menulist li a .cate_name,
	.inpage_itemlist ul.category_menulist li>span .cate_name { flex:1 1 150px; padding-left:10px; text-align:left;  }
	.inpage_itemlist ul.category_menulist li a:hover { background-color:var(--bg-hover); }

	.inpage_itemlist ul.category_menulist span.category_menulist_title { background-image:none; }
	.inpage_itemlist ul.category_menulist span.category_menulist_title.active { background-image: none; }

	.inpage_itemlist ul.category_child_menulist { margin-bottom:20px !important; padding:0; list-style:none; display:block;  }
	.inpage_itemlist ul.category_child_menulist li { border:none !important; }
	.inpage_itemlist ul.category_child_menulist li a { padding:5px 0 5px 10px; }

	.inpage_itemlist ul.common_menulist { display:none; }

}
/* ------　/category list  block ----- */




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 0px 0px 0px; margin:0 auto; }
ul.listed_view_items li .item_img img {
	position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);
	max-height:100%; max-width:100%;
}
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.9rem; line-height:1.3; font-weight:var(--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(--fontw2); color:var(--price); text-align:center; }
ul.listed_view_items .price_box span.tax { font-size:60%; color:var(--text); font-weight:var(--fontw2); }
ul.listed_view_items button.cart_bt { padding:12px 0; font-size:0.7rem; width:90%; }

/* 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,
ul.listed_view_items .gentei {
	display:inline-block; width:36px; height:36px; 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); }
ul.listed_view_items .gentei { background-image: var(--icon-genteimark); }
@media only screen and (max-width: 767px) {
	ul.listed_view_items .new,
	ul.listed_view_items .sale,
	ul.listed_view_items .gentei { width:30px; }
}










/* common style overwrite */
#pages.itempage .pageTop { }


/* 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: 20px;
    height: 20px;
    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:20px; height:20px; 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; }

.main_thumbnails { display:flex; flex-wrap:wrap; }
.main_thumbnails div { flex:0 0 140px; padding:10px 15px; cursor: pointer; font-size:0.7rem; word-break:break-all; }
@media only screen and (max-width: 767px) {
	.main_thumbnails div { flex:0 0 20%; padding:10px 10px; }
}
@media only screen and (max-width: 520px) {
	.main_thumbnails div { flex:0 0 25%; padding:10px 10px; }
}
.main_slider,
.main_thumbnails { min-width: 0; }
