@charset "utf-8";
/* =========================================================基本設定========================================================= */
#papercup_lid,#papercup_lid *,#papercup_lid *::before,#papercup_lid *::after {
	box-sizing: border-box;
}
#papercup_lid img {
	vertical-align: bottom;
}
#papercup_lid {
	width: 1260px;
	margin: 0 auto;
}
/* =========================================================イントロ========================================================= */
#papercup_lid .intro {
	width: 100%;
	height: 470px;
	padding: 2em;
	display: flex;
	justify-content: center;
	flex-direction: column;
	background-image: url("/img/lp/papercup_lid/topimg_pc.jpg");
	background-size: cover;
}
#papercup_lid .intro .title {
	width: 700px;
	padding: 2em 3em;
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #442200;
	background-color: #ffffff;
}
#papercup_lid .intro .title h1 {
	font-size: 3.5em;
	font-weight: bold;
}
#papercup_lid .intro .title p {
	line-height: 1.5em;
}
#papercup_lid .intro .title p.keyword {
	line-height: 1.7em;
	margin-bottom: 0.8em;
	padding-bottom: 10px;
	border-bottom: #442200 1px dashed;
}
#papercup_lid .intro .title p img {
	vertical-align: text-bottom;
}
/* =========================================================タブ========================================================= */
#papercup_lid .tabs {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 100px;
	background-color: #fff;
}
#papercup_lid .tab_item {
	width: calc(100% / 3);
	height: 50px;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	float: left;
	box-sizing: border-box;
	border-left: solid 1px #ffffff;
	color: #442200;
	background-color: #f2f0eb;
	line-height: 50px;
	font-size: 1.3em;
	text-align: center;
	font-weight: bold;
	transition: all 0.2s ease;
}
#papercup_lid .tab_item span {
	font-size: 0.7em;
	margin-left: 10px;
}
#papercup_lid .tab_item:first-of-type {
	border-left-style: none;
}
#papercup_lid .tab_item:hover {
	background-color: #442200;
	color: #ffffff;
}
input[name="tab_item"] {
	display: none;
}
#papercup_lid .tab_content {
	display: none;
	padding: 3em 0 0;
	clear: both;
	overflow: hidden;
}
.hidden{
	display:none;
}
#standard:checked ~ #standard_content,#hot:checked ~ #hot_content,#icehot:checked ~ #icehot_content {
	display: block;
}
#papercup_lid .tabs input:checked + .tab_item {
	background-color: #442200;
	color: #ffffff;
	font-size: 0.9em;
}
/* =========================================================見出し・共通========================================================= */
#papercup_lid h2 {
	color: #442200;
	font-size: 2em;
	font-weight: bold;
	padding-left: 25px;
}
#papercup_lid h3 {
	color: #442200;
	font-size: 1.8em;
	border-bottom: solid 2px #442200;
	font-weight: bold;
	padding-left: 25px;
	margin-bottom: 1.5em;
}
#papercup_lid h4 {
	color: #ffffff;
	font-weight: bold;
	font-size: 1.5em;
	margin-right: 1em;
}
#papercup_lid h5 {
	color: #442200;
	font-weight: bold;
	font-size: 1.3em;
	margin: 0 0 0.5em 0.5em;
}
#papercup_lid .contents {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#papercup_lid .contents .cup a:hover,#papercup_lid .contents .lid:hover,#papercup_lid ul.dan_list li a:hover {
	opacity: 0.7;
	transition: all 0.5s ease-out;
}
/* =========================================================断熱カップ メニュー========================================================= */
#papercup_lid ul.dan_list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 25px;
}
#papercup_lid ul.dan_list li {
	width: 49%;
	margin-bottom: 1em;
	height: 40px;
}
#papercup_lid ul.dan_list::after,#papercup_lid ul.dan_list::before {
	content: "";
	display: block;
	width: 24%;
	height: 0;
}
#papercup_lid ul.dan_list::before {
	order: 1;
}
#papercup_lid ul.dan_list li a {
	display: block;
	font-weight: bold;
	text-decoration: none;
	padding: 0.5em;
	color: #442200;
	background-color: #f2f0eb;
	position: relative;
}
#papercup_lid ul.dan_list li a:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 35%;
	right: 3%;
	border: 6px solid transparent;
	border-top: 10px solid #442200;
}
/* =========================================================商品グループHTML生成側は fl_scroll の1形式に統一========================================================= */
#papercup_lid .contents .fl_scroll {
	width: 100%;
	margin-bottom: 5em;
	background-color: #f2f0eb;
	border-radius: 1em;
}
#papercup_lid .cupname {
	padding: 1em 1.5em 1em 25px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	color: #ffffff;
	background-color: #442200;
	border-radius: 0.5em 0.5em 0 0;
	font-weight: bold;
}
#papercup_lid .cupname span {
	line-height: 2.2;
}
#papercup_lid .contents .fl_scroll .item_list {
	padding: 2em;
}
/* =========================================================コップ一覧========================================================= */
#papercup_lid .contents .fl_scroll .cup_list_scroll {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 16px;
	margin: 0 2em 2em;
	padding: 0 0 1.5em;
}
#papercup_lid .contents .fl_scroll .cup_list_scroll .cup {
	flex: 0 0 200px;
	width: 200px;
	text-align: left;
	line-height: 1.2em;
}
#papercup_lid .contents .fl_scroll .cup_list_scroll .cup img {
	display: block;
	width: 195px;
	height: 195px;
	object-fit: contain;
	margin-bottom: 6px;
}
/* =========================================================対応するフタ========================================================= */
#papercup_lid .contents .fl_scroll .bg_white {
	padding: 2em;
	background-color: #ffffff;
	border-radius: 1em;
}
#papercup_lid .contents .fl_scroll .lid_list {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 16px;
	padding: 0 0 1.5em;
}
#papercup_lid .contents .fl_scroll .lid_list .lid {
	flex: 0 0 200px;
	width: 200px;
	font-size: 0.9em;
}
#papercup_lid .contents .fl_scroll .lid_list .lid a {
	display: block;
	width: 200px;
	text-align: left;
}
#papercup_lid .contents .fl_scroll .lid_list .lid ._img {
	width: 200px;
	height: 150px;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#papercup_lid .contents .fl_scroll .lid_list .lid ._img img {
	display: block;
	width: auto;
	height: auto;
	max-width: 195px;
	max-height: 145px;
	object-fit: contain;
}
#papercup_lid .contents .fl_scroll .lid_list .lid ._txt {
	width: 200px;
	margin: 0;
	line-height: 1.2em;
}
/* =========================================================価格========================================================= */
#papercup_lid .item_price {
	margin-top: 0.55em;
	color: red;
	font-size: 2em;
	font-weight: bold;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
}
#papercup_lid .unit_price {
	margin-top: 0.15em;
	color: #776d67;
	font-size: 1em;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
}
/* =========================================================アイコン・タイトル========================================================= */
.papercuponce {
	display: inline-block;
	margin-right: 10px;
	padding: 4px 15px;
	color: #fff;
	background-color: #6b4c3b;
	border-radius: 999px;
	font-size: 1em;
	font-weight: bold;
	line-height: 1;
}
.papercup_title {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 4px;
	border-bottom: 3px solid #4d2b1b;
}
.papercup_title h2 {
	margin: 0;
	font-size: 1.5em;
	color: #4d2b1b;
}
.papercup_title .chosei {
	margin: 0;
	font-size: 0.9em;
	color: #776d67;
}
/* =========================================================関連記事※紙コップ商品管理とは別領域のため既存機能を維持========================================================= */
#outer .column {
	width: 100%;
	margin-bottom: 45px;
}
#outer .column h3 {
	font-size: 1.5em;
	font-weight: bold;
	margin: 35px 0 15px;
}
#outer .column h3::before {
	content: "┃";
}
#outer .contents_02 {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}
#outer .contents_02 .item_ {
	width: 32%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
#outer .contents_02::after {
	content: "";
	display: block;
	width: 32%;
	height: 0;
}
#outer .contents_02 .item_ ul.btns_ {
	margin-top: auto;
	margin-bottom: 12px;
	padding: 0 10px;
}
#outer .contents_02 .item_ ul.btns_ li.btn_gazou_ {
	position: relative;
}
#outer .item_ .btn_gazou_ a {
	display: block;
	position: relative;
	padding: 10px;
	color: #ffffff;
	background-color: #81BFDA;
	font-weight: bold;
	border-radius: 20px;
	text-align: center;
	text-decoration: none;
	font-size: 1em;
}
#outer .column ul.tokusyu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	list-style: none;
	margin: 0 auto;
}
#outer .column ul.tokusyu li {
	width: 23%;
	margin-bottom: 10px;
}
#outer .column ul.tokusyu li img {
	width: 100%;
	height: auto;
}
#outer .column ul.tokusyu::before,#outer .column ul.tokusyu::after {
	content: "";
	display: block;
	width: 23%;
}
#outer .column ul.tokusyu::before {
	order: 1;
}
#outer .btn_gazou_:hover,#outer .tokusyu li:hover {
	opacity: 0.7;
}
.uline_b {
	display: flex;
	gap: 12px;
	border-bottom: 3px solid #4d2b1b;
	padding-bottom: 4px;
	margin-bottom: 20px;
	align-items: center;
	font-size: 1.5em;
	margin: 0;
	color: #4d2b1b;
	font-weight: bold;
}
/* =========================================================SP========================================================= */


/* =========================================================更新日表示========================================================= */
#outer .datesize {
	justify-items: right;
	font-size: 1em;
	margin: 1em;
	color: gray;
	text-align: right;
}

@media screen and (max-width: 768px) {
	#papercup_lid {
		width: 100%;
	}
	#papercup_lid .intro {
		width: 100%;
		height: auto;
		padding: 10em 1em 1em;
		display: block;
		background-image: url("/img/lp/papercup_lid/topimg_smh.jpg");
		background-position: center;
		background-size: cover;
	}
	#papercup_lid .intro .title {
		width: 100%;
		padding: 1em 2em;
	}
	#papercup_lid .intro .title h1 {
		font-size: 2em;
	}
	#papercup_lid .intro .title p {
		font-size: 0.8em;
		line-height: 1.5;
	}
	#papercup_lid .intro .title p.keyword {
		display: none;
	}
	#papercup_lid .tabs {
		padding-bottom: 2em;
	}
	#papercup_lid .tab_item {
		height: 55px;
		line-height: 1.2;
		font-size: 0.9em;
		animation: none;
		transition: none;
	}
	#papercup_lid .tab_item:hover {
		background-color: #f2f0eb;
		color: #442200;
	}
	#papercup_lid h2 {
		font-size: 1.5em;
		padding-left: 0;
		margin: 0 0 0 1em;
	}
	#papercup_lid h3 {
		font-size: 1.3em;
		padding-left: 0.5em;
		margin: 0 0.5em 1.5em;
	}
	#papercup_lid h4 {
		font-size: 1em;
	}
	#papercup_lid h5 {
		font-size: 1em;
		margin: 0 0 0.5em 0.5em;
	}
	#papercup_lid .contents {
		width: 100%;
		padding: 0 1em;
	}
	#papercup_lid .contents .cup a:hover,#papercup_lid .contents .lid:hover {
		opacity: 1;
	}
	#papercup_lid ul.dan_list {
		padding: 0 10px;
	}
	#papercup_lid ul.dan_list li {
		width: 100%;
		margin-bottom: 0.5em;
		height: 35px;
	}
	#papercup_lid ul.dan_list::after,#papercup_lid ul.dan_list::before {
		content: none;
	}
	#papercup_lid ul.dan_list li a {
		font-size: 0.8em;
	}
	#papercup_lid .cupname {
		padding: 1em;
	}
	#papercup_lid .cupname span {
		font-size: 0.8em;
		line-height: 1.5;
	}
	#papercup_lid .contents .fl_scroll {
		margin-bottom: 2em;
	}
	#papercup_lid .contents .fl_scroll .item_list {
		padding: 1em;
	}
	#papercup_lid .contents .fl_scroll .cup_list_scroll {
		gap: 8px;
		margin: 0 0 1em;
		padding: 0 0 1em;
	}
	#papercup_lid .contents .fl_scroll .cup_list_scroll .cup {
		flex: 0 0 120px;
		width: 120px;
		font-size: 12px;
	}
	#papercup_lid .contents .fl_scroll .cup_list_scroll .cup img {
		width: 120px;
		height: 120px;
	}
	#papercup_lid .contents .fl_scroll .bg_white {
		padding: 1em;
	}
	#papercup_lid .contents .fl_scroll .lid_list {
		gap: 8px;
		padding: 0 0 1em;
	}
	#papercup_lid .contents .fl_scroll .lid_list .lid {
		flex: 0 0 120px;
		width: 120px;
		font-size: 0.8em;
	}
	#papercup_lid .contents .fl_scroll .lid_list .lid a {
		width: 120px;
	}
	#papercup_lid .contents .fl_scroll .lid_list .lid ._img {
		width: 120px;
		height: 95px;
		margin-bottom: 6px;
	}
	#papercup_lid .contents .fl_scroll .lid_list .lid ._img img {
		max-width: 120px;
		max-height: 90px;
	}
	#papercup_lid .contents .fl_scroll .lid_list .lid ._txt {
		width: 120px;
		font-size: 0.8em;
	}
	#papercup_lid .item_price {
		margin-top: 0.4em;
		font-size: 20px;
	}
	#papercup_lid .unit_price {
		margin-top: 0.1em;
		font-size: 12px;
	}
	.papercuponce {
		font-size: 1em;
		padding: 4px 15px;
	}
	.chosei {
		font-size: 1em;
		padding: 5px 15px;
		margin-bottom: 15px;
	}
	#outer .column {
		width: 100%;
	}
	#outer .column h3 {
		padding: 5px;
		font-size: 1.3em;
		margin: 0;
	}
	#outer .contents_02 {
		padding: 0 10px;
	}
	#outer .contents_02 .item_ {
		width: 100%;
		margin: 5px auto;
		padding: 0;
	}
	#outer .contents_02::after {
		content: none;
	}
	#outer .contents_02 .item_ ul.btns_ {
		font-size: 0.8em;
		width: 100%;
		margin-bottom: 0;
		padding: 0;
	}
	#outer .item_ .btn_gazou_ a {
		padding: 10px 0;
		border-radius: 100vh;
		margin: 5px;
	}
	#outer .column ul.tokusyu {
		width: 96%;
		margin: 0 auto;
		padding: 0;
		float: none;
	}
	#outer .column ul.tokusyu li {
		width: 49%;
	}


	/* 更新日表示 */
	#outer .datesize {
		justify-items: right;
		font-size: 0.6em;
		margin: 1em;
		color: gray;
		text-align: right;
	}
}