/* ============================================================
  
  /pages/
  このディレクトリのCSSは「ページ特有の特有のスタイル」を
  記述してください。
  
  **product-details.cssについて**
  本CSSは商品詳細ページ専用CSSです。
  300行を超えるCSSとなる場合は分割を、分割を検討してください。
  
  product-details.css 内ルール
  
  1. Dress機能、ブロックエディタの詳細CSSで制御できないスタイル、
     ページ個別の内容の内容のみ記述すること。
  2. CMS標準の機能で定義できないもののみ記述を可とする。
  3. **共通化できる内容の記述**は絶対にしないでください。
  
============================================================ */
#page,
header .cssskin-_block_header,.b-both_diff:has(#header_nav),
.-dress_83619ad495df4f41b60ac94ddc370757 .m-motion.-f li ul li{
    background-color: #e0e0e0;
}
.-dress_83619ad495df4f41b60ac94ddc370757 .m-motion.-f li ul li:hover{
	background: #c4c4c4;
}

/* text style */
#product_Detail :is(h2, h3, h4, .c-lead, p, th, td),
#product_Detail2 :is(h2, h3, h4, .c-lead, p, th, td){
	font-weight: 300;
}
#product_Detail h2{
	font-size: 30px;
	letter-spacing: 0.09em;
    line-height: 1.47em;
	margin-bottom: 14px;
}
#product_Detail h3{
	font-size: 20px;
}
#product_Detail h4{
	font-size: 18px;
}
#product_Detail .c-lead{
	font-size: 18px;
	line-height: 2.2;
}
#product_Detail .prod__name h3{
	margin-bottom: 8px;
}
#product_Detail .prod__name h4{
	margin-bottom: 20px;
    line-height: 1.4em;
}

/* layout */
#product_Detail{
	max-width: 900px;
	margin-right: auto;
	margin-left: auto;
	justify-content: space-between;
}
#product_Detail .-column1,
#product_Detail .-column2,
#product_Detail .-column3{
	width: calc(100% / 3);
}
#product_Detail .-colmun1{
	text-align: right;
    justify-items: right;
}
#product_Detail .-column2{
	max-width: 200px;
}
#product_Detail .-column3{
	align-content: end;
    padding-bottom: 100px;
}
#product_Detail .prod__name{
	text-align: left;
	width: fit-content;
	margin: 128px 0 auto;
}
#product_Detail .prod__price{
	/*width: fit-content;*/
	width: 280px;
	margin: auto 0 20px auto;
}
.prod__price a.btn-default,
a.return{
    /*background: transparent !important;*/
}
#product_Detail :is(.c-list_news, .c-list_news th, .c-list_news td) {
	border: none;
}
#product_Detail .c-list_news th{
	padding: 0 .4em 0 0;
}
#product_Detail .prod__price--onecup .c-list_news th{
	width: 38%;
}
#product_Detail .c-list_news td{
	padding: 0 .2em;
}
svg #recommend_wtd{
	mix-blend-mode: multiply;
}
.limitedbrew_badge{
	grid-area: stack;
	z-index: 3;
	align-self: start;
	justify-self: start;
	margin: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 7.2em;
	height: 7.2em;
	border: 0.5px solid #000;
	border-radius: 50%;
	text-align: center;
	font-size: 14px;
	line-height: 1.2;
	position: absolute;
    top: 132px;
    left: -64px;
}

/* product_Detail2 オススメの飲み方～甘辛表 */
#product_Detail2{
	justify-content: center;
}
#product_Detail2 .-column1 {
    width: calc(50% - 75px);
	margin-right: 50px;
}
#product_Detail2 .-column2{
	margin-left: 0;
}
svg  g,
svg .cls-2,
svg .st1{
    isolation: auto !important;
}
#product_Detail2 h4{
	font-weight: 400;
}
#product_Detail2 .c-left svg{
	padding: 22px 11px 45px;
}
#product_Detail2 .prod__txt{
	margin-bottom: 40px;
	line-height: 1.6em;
}
#product_Detail2 .prod__txt p{
	text-align: justify;
}
#product_Detail2 .c-list_news{
	border-top: none;
}
#product_Detail2 :is(.c-list_news th, .c-list_news td) {
	width: 50%;
	font-size: 15px;
	padding: 0.8em;
	font-weight: 300;
	border-bottom-color: #000;
}
#product_Detail2 :is(.c-list_news tr:first-child th, .c-list_news tr:first-child td) {
	padding-top: 0;
}
/*
#product_Detail2 svg#_dry_lsttbl,
#product_Detail2 svg#_semidry_lsttbl,
#product_Detail2 svg#_semisweet_lsttbl,
#product_Detail2 svg#_sweet_lsttbl{
	margin-top: 28px;
}
*/

#product_Detail2 .lsttbl{
	display: flex;
	margin-top: 20px;
}
#product_Detail2 .dry_lsttbl,
#product_Detail2 .semidry_lsttbl,
#product_Detail2 .semisweet_lsttbl,
#product_Detail2 .sweet_lsttbl{
	border: solid 0.5px #000000;
	border-right: none;
	text-align: center;
    width: 25%;
    padding: 3px 0 2px 0;
}
#product_Detail2 .dry_lsttbl{
	border-right: solid 0.5px #000000;
}
#product_Detail2 .lsttbl .select{
	background-color: #000000;
	color: #ffffff;
}

/* 合う料理 */
#product_Detail2 .cuisine{
	display: flex;
	/*align-items: center;*/
	justify-content: space-between;
}
#product_Detail2 .cuisine .cuisine__ctn--txt{
	margin-right: 8px;
}
#product_Detail2 .cuisine .cuisine__ctn--img source,
#product_Detail2 .cuisine .cuisine__ctn--img img{
	max-width: 220px;
}

/*--------------------------------------
 KUBOTA MAIL NEWS タブエリア
---------------------------------------*/
.-dress_83619ad495df4f41b60ac94ddc370757 .a-main div.cssskin-block_mailnews{
	background: #000;
	max-width: initial;
}
.-dress_83619ad495df4f41b60ac94ddc370757 .a-main div.inner__w1200{
	max-width: 1200px;
	margin: auto;
}

#_opt-in_title{
	max-width: 224px;
}
#common-parts_opt-in .-col8 .c-body{
	margin-bottom: 34px;
}


@media screen and (min-width: 641px) and (max-width: 1024px){
	#product_Detail2 .cuisine{
		display: block;
	}
	#product_Detail2 .cuisine .cuisine__ctn--img img{
		max-width: none;
    	width: 260px;
	}
	#product_Detail2 .cuisine .c-fleft{
		padding: 16px 0 0;
	}
}
@media screen and (min-width: 641px) and (max-width: 840px){
	#product_Detail a.btn-default{
		width: 240px!important;
	}
}

@media (max-width: 640px) {
	#header_nav_sp{
		background: #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
	}
	.l-header__nav,
	.m-menu__child{
		background: #e0e0e0;
	}
	main{
		margin-top: 88px;
	}
	.a-site_contents{
		padding: 0 30px;
	}
	#product_Detail h2{
		font-size: 22px;
	}
	#product_Detail h4{
		font-size: 18px;
	}
	#product_Detail .c-lead,
	#product_Detail2 .c-small_headline{
		font-size: 16px;
		line-height: 2em;
	}
	#product_Detail .c-small_headline,
	#product_Detail2 p{
		font-size: 14px;
	}
	.-dress_83619ad495df4f41b60ac94ddc370757 .a-main .b-headlines{
		/* width:88%; */
		padding-right: 0;
        padding-left: 0;
	}
	#product_Detail .prod__name h3{
		font-size: 15px;
	}
	#product_Detail .prod__name h4{
		margin-bottom: 10px;
	}
	#product_Detail{
		/*display: grid;
		grid-template-areas: "stack";*/
		justify-content: center;
		align-content: center;
	}
	#product_Detail .column{
		grid-area: stack;
		height: fit-content;
		width: calc(100vw - 60px);
	}
	#product_Detail .-column1,
	#product_Detail .-column2,
	#product_Detail .-column3{
		width: 100%;
	}
	#product_Detail .column.-column1{
		z-index: 2;
    	align-self: start;
    	text-align: left;
    	/*padding-bottom: 720px;*/
	}
	#product_Detail .-column2{
        z-index: 1;
    	justify-self: center;
    	align-self: center;
    	max-width: 180px;
    	margin-top: -120px;
    	/*max-width: 25vw;
    	padding-bottom: 50px;*/
	}
	#product_Detail .-column3{
		z-index: 2;
    	align-self: end;
    	text-align: left;
    	/*padding-top: 280px;*/
    	padding-bottom: 0;
    	margin-top: -60px;
	}
	a.btn-default{
	    width: 100vw!important;
	    height:40px !important;
	    padding: 10px 0 8px 0 !important;
	    margin-left: auto;
	    margin-right: auto;
    }
	#product_Detail .prod__name,
	#product_Detail .prod__price{
		/*width: max-content;*/
		width: 100%;
		margin: 0;
	}
	#product_Detail .prod__txt{
		margin-bottom: 40px;
	}
	#product_Detail .prod__price tr{
		display: flex;
	}
	.prod__price .c-list_news{
		margin-bottom: 35px;
	}
	#product_Detail .-column2 .c-img,
	#product_Detail .-column2 picture,
	#product_Detail .-column2 img{
		display: block;
	}
	#product_Detail .-column2 picture,
	#product_Detail .-column2 img{
		margin: 56px auto 0;
	}
	
	#product_Detail .prod__price th,
	#product_Detail .prod__price td{
		width: fit-content;
	}
	
	#product_Detail2{
		flex-direction: column-reverse;
	}
	#product_Detail2 .-column1{
		margin-top: 48px;
		margin-right: 0;
		width: 100%;
	}
	#product_Detail2 .lsttbl{
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 5px;
	}
	#product_Detail2 .c-list_news{
		border-bottom: none;
	}
	#product_Detail2 .c-list_news tr{
		display: flex;
	}
	#product_Detail2 :is(.c-list_news tr th, .c-list_news tr td){
		padding: 0.8em 0;
	}
	#product_Detail2 :is(.c-list_news tr:first-child th, .c-list_news tr:first-child td){
		padding-bottom: 0.8em;
	}
	#product_Detail .c-list_news th{
		width: 7.5em;
	}
	#product_Detail .c-list_news td{
		padding: 0;
	}
/*	#product_Detail2 svg#_dry_lsttbl, 
	#product_Detail2 svg#_semidry_lsttbl, 
	#product_Detail2 svg#_semisweet_lsttbl, 
	#product_Detail2 svg#_sweet_lsttbl {
    	margin-top: 10px;
	}*/

	#product_Detail2 .dry_lsttbl,
	#product_Detail2 .semidry_lsttbl,
	#product_Detail2 .semisweet_lsttbl,
	#product_Detail2 .sweet_lsttbl{
		border-right: solid 0.5px #000000;
	    width: calc(50% - 3px);
	    margin-top: 6px;
	}

	#product_Detail2 .cuisine{
		margin-bottom: 68px;
	}
	.cuisine__ctn--img .c-img{
		width:110px;
		padding:0;
	}
	#product_Detail2 .c-left svg{
		padding: 20px 0 45px;
	}
	
	#goto_top a.btn-default{
		font-size: 15px;
		background-image: url(../../../_userdata/icon/arrow_flipped.png)!important;
		background-position: 5% 50% !important;
		width: 226px !important;
	}
	.-dress_83619ad495df4f41b60ac94ddc370757 .a-main div.cssskin-block_mailnews{
		width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
	}
	#common-parts_opt-in .column .c-body {
		margin-bottom: 34px;
		text-align: justify;
	}
}