
/*▼▼特定用途(モノトーンテンプレ/.oc_desc.monotone)*2019/06/05 11:45************************/
.oc_desc.monotone{}

	/*大画像*/
.oc_desc.monotone #big_image{}

	/*セットに入っている商品*/
.oc_desc.monotone #set_list{ margin: 20px auto;}
.oc_desc.monotone #set_list h3{
	padding: 10px;
	text-align: center;
	background: #ccc;
}
.oc_desc.monotone #set_list > figure ~ h3{ margin-top: 20px;}

.oc_desc.monotone #set_list .lineup_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
}
.oc_desc.monotone #set_list .lineup_box .box_item{
	flex: 0 1 auto;
	width: 48%;
	margin: 2px;
}
.oc_desc.monotone #set_list .lineup_box a,
.oc_desc.monotone #set_list .lineup_box img{ width: 100%;}


/* PC▽ */
html[data-browse-mode="P"] .oc_desc.monotone #set_list{ margin: 40px auto;}
html[data-browse-mode="P"] .oc_desc.monotone #set_list .lineup_box .box_item{ width: 24%; margin: 2px 0.45%;}
/*△*/



	/*キャッチ*/
.oc_desc.monotone #catch_box{
	padding: 20px 0;
	font-size: 18px;
	line-height: 180%;
}

html[data-browse-mode="P"] .oc_desc.monotone #catch_box{ padding: 20px; font-size: 24px;}


	/*リード*/
.oc_desc.monotone #leader_box{ margin: 15px 0;}
html[data-browse-mode="P"] .oc_desc.monotone #leader_box{ padding: 0.5em 5em; text-align: center;}
html[data-browse-mode="P"] .oc_desc.monotone #leader_box p{ margin-bottom: 1em;}

	/*set_list*/
html[data-browse-mode="P"] .oc_desc.monotone #set_list .lineup_box .box_item{ width: 24%; margin: 2px 0.45%;}



	/*商品紹介(v22)*/
.oc_desc.monotone #item_explain{}
.oc_desc.monotone #item_explain .item_box_v22{ margin: 5vw 0vw; }

		/*v22 itemheader 商品見出し*/
.oc_desc.monotone #item_explain .item_box_v22 .itemheader {
	position: relative;
	margin: 20px 0 10px;
	padding: 0 10px 25px 17px;
	background: #fff;
	background: linear-gradient(to right,#111 0%,#111 8px,#fff 8px,#fff 100%);
}
.oc_desc.monotone #item_explain .item_box_v22 .itemheader::after{
	content: "";
	position: absolute; right: 0; bottom: 0;
	width: 32px; height: 21px;
	background:  url( https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-005.gif' ) top left / 100% auto no-repeat;
}

.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemcatch,
.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemname { margin: 0;}
.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemcatch { display: block; font-size: 16px;}
.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemcatch br { display: none;}

.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemname { display: block; font-size: 18px; letter-spacing: -2px; line-height: 130%;}
.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemtype { position: absolute; left: 17px; bottom: 0;}



			/*v22 itemheader 商品見出し 国旗表示*/
.oc_desc.monotone #item_explain .item_box_v22.australia .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-001.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.belgium .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-002.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.canada .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-003.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.denmark .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-004.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.france .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-005.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.germany .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-006.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.italy .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-007.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.japan .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-008.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.netherlands .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-009.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.newzealand .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-010.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.norway .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-011.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.spain .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-012.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.switzerland .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-013.gif' );}
.oc_desc.monotone #item_explain .item_box_v22.england .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-014.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.unitedstates .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-015.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.ordercheese .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-016.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.singapore .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-017.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.ireland .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-018.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.greece .itemheader::after { background-image: url( 'https://asbee.lol/img/0005/img/parts/cssimg/flag/europe-019.gif' ); }
.oc_desc.monotone #item_explain .item_box_v22.non_icon .itemheader::after { background-image: none; }
		/*正方形国旗*/
.oc_desc.monotone #item_explain .item_box_v22.switzerland .itemheader::after{ width: 21px;}



		/*商品の画像(,2) */
.oc_desc.monotone #item_explain .item_box_v22 .photo img{ width: 100%;}
.oc_desc.monotone #item_explain .item_box_v22 .photo2{}
.oc_desc.monotone #item_explain .item_box_v22 .photo2 img{ display: inline-block;}
.oc_desc.monotone #item_explain .item_box_v22 .photo2 img:nth-of-type(1){ width: 32.5%;}
.oc_desc.monotone #item_explain .item_box_v22 .photo2 img:nth-of-type(2){ width: 65.5%;}
		/*商品のコメント*/
.oc_desc.monotone #item_explain .item_box_v22 .item_comment{ margin-top: 10px;}
.oc_desc.monotone #item_explain .item_box_v22 .item_comment dt{ font-size: 120%; line-height: 130%;}
.oc_desc.monotone #item_explain .item_box_v22 .item_comment dt::before{ content: "■ ";}
.oc_desc.monotone #item_explain .item_box_v22 .item_comment dd{ width: 96%; margin: 0.5em auto 1.5em; 	line-height: 1.3em;}
		/*外リンクボタン*/
.oc_desc.monotone #item_explain .item_box_v22 .outlink_btn{ margin-left: calc( 100% - 120px );}

		/*お客様の声*/
.oc_desc.monotone #item_explain .item_box_v22 .c_voice{ position: relative; letter-spacing: -1px; padding: 15px 5px; background: #dddddd; border: unset; border-radius: unset; border-top: 3px solid #666666 !important;}
.oc_desc.monotone #item_explain .item_box_v22 .c_voice .title{ display: inline; padding: 5px; padding-right: 15px; font-size: 18px; color: #D31200; line-height: 120%;}
.oc_desc.monotone #item_explain .item_box_v22 .c_voice .itemname{ display: none;}
.oc_desc.monotone #item_explain .item_box_v22 .c_voice .name{ display: inline;}
.oc_desc.monotone #item_explain .item_box_v22 .c_voice .name::after{ content: "より";}
.oc_desc.monotone #item_explain .item_box_v22 .c_voice p{ padding: 8px; font-size: 13px;}


		/* itemheader logo_熟成士 */
.oc_desc.monotone #item_explain .item_box_v22.logo_alleosse .itemheader{ background: linear-gradient(to right,#000 0%,#000 1px,#fff 1px,#fff 100%);}
.oc_desc.monotone #item_explain .item_box_v22.logo_rodolphe .itemheader{ background: linear-gradient(to right,#1B3361 0%,#1B3361 1px,#fff 1px,#fff 100%);}
.oc_desc.monotone #item_explain .item_box_v22.logo_bourgon .itemheader{ background: linear-gradient(to right,#385B01 0%,#385B01 1px,#fff 1px,#fff 100%);}
.oc_desc.monotone #item_explain .item_box_v22.logo_alleosse .itemheader .itemcatch,
.oc_desc.monotone #item_explain .item_box_v22.logo_rodolphe .itemheader .itemcatch,
.oc_desc.monotone #item_explain .item_box_v22.logo_bourgon .itemheader .itemcatch{ position: relative; z-index: 10; display: inline-block; margin-left: -17px; margin-bottom: 8px; padding: 5px 10px; color: #fff; text-align: center; line-height: calc( 1em + 5px ); background-color: #000000; background-image: linear-gradient(to bottom,transparent 0,transparent 4px,#fff 4px,#fff 5px,transparent 5px,transparent calc( 100% - 5px ) ,#fff calc( 100% - 5px ),#fff calc( 100% - 4px ),transparent calc( 100% - 4px ),transparent 100%);}
.oc_desc.monotone #item_explain .item_box_v22.logo_rodolphe .itemheader .itemcatch { background-color: #1B3361;}
.oc_desc.monotone #item_explain .item_box_v22.logo_bourgon .itemheader .itemcatch { background-color: #385B01;}



/* PC▽ */ @media only screen and (min-width: 768px) {
	.oc_desc.monotone #item_explain .item_box_v22{ margin: 45px 0vw; }
	.oc_desc.monotone #item_explain .item_box_v22 .itemheader::after { width: 80px; height: 53px;}
		/*正方形*/.oc_desc.monotone #item_explain .item_box_v22.switzerland .itemheader::after{ width: 53px;}
	.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemcatch { display: block; font-size: 20px;}
	.oc_desc.monotone #item_explain .item_box_v22.logo_alleosse .itemheader .itemcatch,
	.oc_desc.monotone #item_explain .item_box_v22.logo_rodolphe .itemheader .itemcatch,
	.oc_desc.monotone #item_explain .item_box_v22.logo_bourgon .itemheader .itemcatch{ display: block; width: 330px;}
	.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemname { display: inline; font-size: 28px;}
	.oc_desc.monotone #item_explain .item_box_v22 .itemheader .itemtype{ position: static; margin-left: 10px; }
	.oc_desc.monotone #item_explain .item_box_v22 .item_comment{ margin-top: 20px;}
	.oc_desc.monotone #item_explain .item_box_v22 .photo2{ padding-left: 1%;}
	.oc_desc.monotone #item_explain .item_box_v22 .photo2 img:nth-of-type(1){ width: 32.75%;}
	.oc_desc.monotone #item_explain .item_box_v22 .photo2 img:nth-of-type(2){ width: 66.05%;}
	.oc_desc.monotone #item_explain .item_box_v22 .c_voice{ padding: 10px;}
	.oc_desc.monotone #item_explain .item_box_v22 .c_voice::before{ content: "CUSTOMER'S VOICE"; position: absolute; top: 4px; left: 4px; display: block; font-size: 18px; font-weight: 400; color: #bbb; }
	.oc_desc.monotone #item_explain .item_box_v22 .c_voice .title{ display: block; padding-top: 15px;}
	.oc_desc.monotone #item_explain .item_box_v22 .c_voice .itemname{ position: absolute; display: block; top: 5px; right: 10px;}
	.oc_desc.monotone #item_explain .item_box_v22 .c_voice .name{ position: absolute; display: block; top: 1.5em; right: 10px; font-size: 120%;}
	.oc_desc.monotone #item_explain .item_box_v22 .c_voice .name::before{ content: "「";}
	.oc_desc.monotone #item_explain .item_box_v22 .c_voice .name::after{ content: "」より";}
	.oc_desc.monotone #item_explain .item_box_v22 .c_voice p{ font-size: 14px;}
}/*△*/

		/* itemheader affineur 熟成士(黒) */
.oc_desc.oc_desc.monotone #item_explain .item_box_v22.affineur .itemheader{
	margin-bottom: 0px; padding-top: 0.5em; padding-right: 32px;
	font-family: serif; color: #eee; background: #000;
	background: linear-gradient( to bottom ,#000 0%,#1e1d1c 3%,#000 100%);
}
.oc_desc.oc_desc.monotone #item_explain .item_box_v22.affineur .itemheader::after{ right: 4px; bottom: unset; top: 50%; transform: translateY(-50%); padding-right: 35px;}
html[data-browse-mode="P"] .oc_desc.oc_desc.monotone #item_explain .item_box_v22.affineur .itemheader::after{ right: 6px; padding-right: 90px;}

.oc_desc.oc_desc.monotone #item_explain .item_box_v22.affineur.alleosse .itemheader{
	background: 
		linear-gradient(to right,#a00 0%,#a00 8px,rgba(0,0,0,0) 8px),
		linear-gradient( to bottom ,#000 0%,#1e1d1c 3%,#000 100%);
}
.oc_desc.oc_desc.monotone #item_explain .item_box_v22.affineur.bourgon .itemheader{
	background: 
		linear-gradient(to right,#084d00 0%,#084d00 8px,rgba(0,0,0,0) 8px),
		linear-gradient( to bottom ,#000 0%,#1e1d1c 3%,#000 100%);
}
.oc_desc.oc_desc.monotone #item_explain .item_box_v22.affineur.rodolphe .itemheader{
	background: 
		linear-gradient(to right,#00147f 0%,#00147f 8px,rgba(0,0,0,0) 8px),
		linear-gradient( to bottom ,#000 0%,#1e1d1c 3%,#000 100%);
}


	/*嬉しいポイント*/
.oc_desc.monotone #happy_point{
	margin-top: 30px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	font-size: 14px;
	background: #F5F4F2;
}
html[data-browse-mode="S"] .oc_desc.monotone #happy_point span{
	#ec4main .happy_point_ttl span{ line-height: 1.3em;}
}



.oc_desc.monotone #happy_point .wrap_title{
	margin: 40px 0 0;
	padding: 15px 15px 15px 30px;
	font-family: serif;
	color: #EDD951;
	background-color: #333;
	background: linear-gradient(to right,#333 0%,#333 12px,#aaa 12px,#aaa 13px,#333 13px,#333 14px,#aaa 14px,#aaa 15px,#333 15px,#333 100%);
}

.oc_desc.monotone #happy_point .inner{
	margin: 10px;
	padding: 10px;
	background: #fff;
	border-radius: 10px;
	border: 1px dashed #4D4642;
}
.oc_desc.monotone #happy_point .inner.non_deco{ background: none; border: none; padding: unset;}
.oc_desc.monotone #happy_point .inner a{ text-decoration: underline;}
.oc_desc.monotone #happy_point .inner p{ padding: 10px 1em;}
.oc_desc.monotone #happy_point .inner h4,
.oc_desc.monotone #happy_point .inner h5{ padding: 15px; min-height: 60px;}
.oc_desc.monotone #happy_point .inner h4{
	margin-bottom: 15px;
	padding-left: 20px;
	font-size: 15px;
	color: #D31200;
	background: #FFDBC8 url( 'https://asbee.lol/img/0005/img/parts/cssimg/symbol_sticky_top_r_white.png' ) right top / 50px auto no-repeat;
}
.oc_desc.monotone #happy_point .inner h4::before{
	content: "";
	display: inline-block;
	float: right;
	width: 25px;
	height: 30px;
}
.oc_desc.monotone #happy_point .inner h5{
	margin-top: 15px;
	font-size: 14px;
	background: #f0f5f5;
	border: 1px solid #ccc;
	border-width: 0px 1px 1px 0px;
	border-radius: 10px;
}


html[data-browse-mode="P"] .oc_desc.monotone #happy_point{ margin-top: 50px;}
html[data-browse-mode="P"] .oc_desc.monotone #happy_point .inner{ padding: 20px; margin: 20px;}
html[data-browse-mode="P"] .oc_desc.monotone #happy_point .inner h4{ font-size: 20px;}
html[data-browse-mode="P"] .oc_desc.monotone #happy_point .inner h5{ font-size: 18px;}
html[data-browse-mode="P"] .oc_desc.monotone #happy_point .giftbox_image{ width: 20%;}
	/*包装種類/幅*/
html[data-browse-mode="P"] .oc_desc.monotone #happy_point .wrap_item{ display: flex; flex-flow: row wrap; justify-content: space-between;}
html[data-browse-mode="P"] .oc_desc.monotone #happy_point .wrap_item .wrap_img{ width: 40%;}
html[data-browse-mode="P"] .oc_desc.monotone #happy_point .wrap_item .wrap_text{ width: 60%;}


	/*おすすめグループ一覧*/
.oc_desc.monotone #group_list{}
	/*ご注意ください*/
.oc_desc.monotone #attention{}


