@charset "shift_jis";
/* CSS Document */

/* ==================================================

   2024 SIMPLE STYLE Award

================================================== */

/* コンテンツ幅リセット */
main#wrapper {
	position: relative;
	width: 100%!important;
	max-width: initial!important;
	max-width: auto!important;
	margin: 0 auto!important;
	padding: 0!important;
	overflow: visible!important;
}
article#contents { padding-bottom: 0!important; }
article#contents .inner_content { padding-top: 0!important; }

:root {
	--main-clr-lightgray: #c9c9c8;
	--main-clr-lightbeige: #cbc1ae;

	--main-clr-white: #f4f5f0;
	--main-clr-gray: #7f7c7a;
	--clr-ss-red-light: #d07157;

	--clr-ss-black: #48413b;

	--bg-red01: #841d1a;
	--bg-red02: #64100e;
	--aw-yallow01: #be8f32;
	--aw-yallow02:#f6efd8;

	--hb-red: #99403b;
	--hb-yellow: #be8f32;
}


#award a,
#award a:hover {
	color: #fff;
	text-decoration: none;
	transition: all 0.2s;
}
#award * { box-sizing: border-box; }
#award h1,
#award h2,
#award h3,
#award h4,
#award h5 { color: #fff;}
#award img { width: 100%; height: auto; vertical-align: bottom; }
#award .pc_none { display: none; }

#award {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	color: #fff;
	font-weight: 500;
	background-color: var(--bg-red02);
}



/* ==================================================
   メインコンテンツエリア
================================================== */

/* 看板
================================================== */

#award #kanban {
	position: relative;
	width: 100%;
	margin-bottom: 32px;
}
#award #kanban > h2 {
	position: relative;
	width: 100%;
	margin-bottom: 32px;
}

#award #kanban > h3 {
	font-size: 22px;
	font-weight: 700;
}
#award #kanban > p {
	font-size: 18px;
	font-weight: 700;
}
#award #kanban > p span {
	color: #d7bb2c;
	font-size: 125%;
	font-weight: 700;
}


/* コンテンツ幅・セクション
================================================== */

#award .contentsarea {
	order: 2;
	position: relative;
	width: 560px;
	text-align: center;
	background-color: var(--bg-red01);
	margin: 0 auto;
}

#award .section {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 20px 20px 32px;
	margin: 0 auto 32px;
}
#award .section > .inner {
	position: relative;
	width: 100%;
}



/* 汎用見出し
================================================== */

#award h3[class^="heading_"] {
	position: relative;
	width: 100%;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 0.75em;
}

#award h3.heading_cmn {
	font-size: 28px;
}

#award h3.heading_ranking {
	width: calc(100% + 20px*2);
	font-size: 20px;
	background: url(/IMAGE/award/bg_h.gif) no-repeat center center;
	background-size: cover;
	padding: 20px 0;
	margin: auto -20px;
}

#award h3.heading_ranking span,
#award h3.heading_ranking strong { line-height: 1.35; }
#award h3.heading_ranking span { font-size: 75%; }
#award h3.heading_ranking strong {
	font-size: 150%;
	font-weight: 700;
	margin-right: 0.25em;
}

#award .limited {
	font-size: 18px;
	margin: 0.35em auto 1em;
}




/* クーポン
================================================== */

#award #coupon {
	background-color: var(--aw-yallow01);
}
#award #coupon h3 {
	margin-bottom: 0.5em;
}

#award #coupon .app {
	width: 100%;
	margin-top: 16px;
	background-color: #fff;
	border-radius: 8px;
}
#award #coupon .app a {
	display: block;
	background-color: var(--aw-yallow02);
	padding: 0 0 16px;
	border-radius: 8px;
}
#award #coupon .app p {
	color: var(--clr-ss-black);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
#award #coupon .app p span {
	font-size: 125%;
	font-weight: 700;
}
#award #coupon .app p strong {
	color: var(--clr-ss-red-light);
	font-size: 150%;
	font-weight: 700;
}
#award #coupon .app p.txt_s {
	color: #666;
	font-size: 95%;
	font-weight: 700;
}

#award #coupon .app a:hover {
	opacity: 0.7;
}

#award #coupon .app p.btn_d {
	position: relative;
	display: inline-block;
	width: 80%;
	color: #fff;
	font-size: 18px;
	background-color: var(--hb-red);
	padding: 0.75em 0;
	border-radius: 100px;
	margin: -0.25em auto 0.5em;
}
#award #coupon .app p.btn_d::after {
	position: absolute;
	top: 50%;
	right: 10%;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg) translateY(-50%);
	transition: all 0.2s;
}
#award #coupon .app:hover p.btn_d::after {
	right: 8%;
	transition: all 0.2s;
}



/* ナビ
================================================== */

#award #menu {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
#award #menu li {
	position: relative;
	width: calc((100% - 8px*2)/3);
	display: flex;
}
#award #menu li a {
	position: relative;
	width: 100%;
	display: block;
	color: var(--clr-ss-black);
	background-color: var(--aw-yallow02);
	border-radius: 8px;
	padding: 16px 0 24px;
}
#award #menu li a::after {
	position: absolute;
	left: 50%;
	bottom: 12px;
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	border-right: solid 3px var(--clr-ss-black);
	border-bottom: solid 3px var(--clr-ss-black);
	transform: rotate(45deg) translateX(-50%);
}
#award #menu li a span {
	display: inline-block;
	width: auto;
	text-align: left;
	font-size: 16px;
	font-weight: 700;
}
#award #menu li a strong {
	color: var(--bg-red01);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
	margin-right: 4px;
}


#award #menu li.w100 { width: 100%; }
#award #menu li.w100 a {
	display: flex;
	justify-content: space-between;
	padding: 0;
}
#award #menu li.w100 a .icon {
	width: 25%;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	/* background-color: var(--main-clr-lightbeige); */
	background-color: var(--aw-yallow01);
	border-radius: 8px 0 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#award #menu li.w100 a p {
	flex: 1;
	font-size: 14px;
	padding: 12px 24px 12px 0;
}
#award #menu li.w100 a::after {
	left: auto;
	bottom: auto;
	top: 50%;
	right: 24px;
	transform: rotate(45deg) translateY(-60%);
}

/* hover */
#award #menu li:hover a {
	opacity: 0.7;
}



/* 汎用リスト
================================================== */

#award ul[class^="col_"] {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 auto;
}
#award ul[class^="col_"] > li { position: relative; }
#award ul[class^="col_"] > li > a {
	position: relative;
	width: 100%;
	display: block;
}
#award ul[class^="col_"] > li:hover > a {
	opacity: 0.7;
}

#award ul.col_1 > li,
#award ul[class^="col_"] > li.w100 { width: 100%; }
#award ul.col_2 > li { width: calc((100% - 8px*1)/2); }
#award ul.col_3 > li { width: calc((100% - 8px*2)/3); }




/* ランキング
================================================== */

#award .list_ranking {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 32px 10px;
}
#award .list_ranking li { position: relative; display: flex; }
#award .list_ranking li a {
	position: relative;
	width: 100%;
	color: var(--clr-ss-black);
	display: block;
	background-color: var(--aw-yallow02);
	box-shadow: 0px 0px 8px 4px var(--bg-red02);
	border-radius: 16px;
}

#award .list_ranking li.clm1 { width: 100%; }
#award .list_ranking li.clm1 a { padding: 20px; }

#award .list_ranking li.clm2 { width: calc((100% - 10px*1)/2); }
#award .list_ranking li.clm2 a { padding: 20px 10px; }

/* アイコン */
#award .list_ranking .icon {
	position: absolute;
	top: -20px;
	left: -10px;
	width: 96px;
}
#award .list_ranking li.clm2 .icon { width: 64px; }
#award .list_ranking .icon img {
	width: 100%;
	height: auto;
}

/* コピー */
#award .list_ranking h4 {
	color: var(--clr-ss-black);
	font-weight: 700;
	margin-bottom: 0.5em;
}
#award .list_ranking li.clm1 h4 { font-size: 24px; }
#award .list_ranking li.clm2 h4 { font-size: 16px; }


/* 画像 */
#award .list_ranking .list_img {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 auto 8px;
}

/* 商品名・価格 */
#award .list_ranking .spec {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
#award .list_ranking li.clm2 .spec {
	flex-direction: column;
	align-items: flex-start;
}


/* 商品名 */
#award .list_ranking h5 {
	color: var(--clr-ss-black);
	font-size: 18px;
	font-weight: 700;
	text-align: left;
}
#award .list_ranking h5 span { font-size: 70%;}
#award .list_ranking li.clm2 h5 { font-size: 14px; }

/* 価格 */
#award .list_ranking .price_wrap { position: relative; padding-right: 1em; }
#award .list_ranking li.clm2 .price_wrap { text-align: right; width: 100%; }
#award .list_ranking .price_wrap .spesicalprice { display: none; }
#award .list_ranking .price_wrap .price { color: var(--clr-ss-red-light)!important; }
#award .list_ranking .price_wrap .intax { display: none; }

#award .list_ranking .price_wrap .buy_price ul { position: relative; }
#award .list_ranking .price_wrap .buy_price ul::after {
	position: absolute;
	top: calc(50% - 4px);
	right: -15%;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 2px var(--clr-ss-red-light);
	border-right: solid 2px var(--clr-ss-red-light);
	transform: rotate(45deg);
	margin-left: 4px;
}

/* 在庫
================================================== */

#award .list_zaiko {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#award .heading_zaiko {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 1em;
}
#award .list_zaiko + .heading_zaiko { margin-top: 2em;}
#award .heading_zaiko span,
#award .heading_zaiko strong {
	font-weight: 700;
	line-height: 1;
}
#award .heading_zaiko span {
	font-size: 110%;
	color: var(--bg-red01);
	padding: 4px 8px;
	margin-right: 4px;
}
#award .heading_zaiko.zaiko30 span { background-color: #e8c574; }
#award .heading_zaiko.zaiko20 span { background-color: #bac3c6; }
#award .heading_zaiko.zaiko10 span { background-color: #ffc893; }
#award .heading_zaiko strong { font-size: 120%; }



#award .list_zaiko li {
	position: relative;
	width: calc((100% - 8px*2)/3);
	display: flex;
	background-color: #fff;
}
#award .list_zaiko li a {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	/* background-color: var(--aw-yallow01); */
	background-color: var(--aw-yallow02);
	/* padding: 4px 4px 12px; */
	padding: 4px 4px 8px;
}

/* 左上 〇〇% */
#award .list_zaiko .icon_sale {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	display: inline-block;
	content: "";
	width: 80px;
	height: 60px;
	line-height: 1;
	text-align: left;
	padding: 4px;
	display: none;/*★★★*/
}
#award .list_zaiko .icon_sale span {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-shadow: 1px 1px 0 var(--aw-yallow01), -1px -1px 0 var(--aw-yallow01),
				 -1px 1px 0 var(--aw-yallow01), 1px -1px 0 var(--aw-yallow01),
				 0 1px 0 var(--aw-yallow01), 0 -1px 0 var(--aw-yallow01),
				 -1px 0 0 var(--aw-yallow01), 1px 0 0 var(--aw-yallow01),
				 2px 2px 0 var(--aw-yallow01), -2px -2px 0 var(--aw-yallow01),
				 -2px 2px 0 var(--aw-yallow01), 2px -2px 0 var(--aw-yallow01),
				 0 2px 0 var(--aw-yallow01), 0 -2px 0 var(--aw-yallow01),
				 -2px 0 0 var(--aw-yallow01), 2px 0 0 var(--aw-yallow01);
}
#award .list_zaiko .icon_sale strong {
	font-size: 175%;
	font-weight: 700;
	line-height: 1;
	margin-right: 2px;
}

#award .list_zaiko .icon_sale::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	display: inline-block;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 40px;
	border-color: var(--aw-yallow01) transparent transparent var(--aw-yallow01);
}

/* 画像 */
#award .list_zaiko .thumb {
	margin-bottom: 8px;
}

/* 商品名 */
#award .list_zaiko h4 {
	color: var(--clr-ss-black);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	/* text-align: left; */
	margin-bottom: 1em;
}

/* 価格 */
#award .list_zaiko .price_wrap {
	margin-top: auto;
	padding: 0 4px;
	line-height: 1;
}
#award .list_zaiko .price_wrap p {
	color: var(--clr-ss-black);
	line-height: 1;
}
#award .list_zaiko .price_wrap p.price_normal { font-size: 12px; }
#award .list_zaiko .price_wrap p.bg_coupon {
	font-size: 13px;
	font-weight: 700;
	color: var(--bg-red01);
	padding: 4px 0;
	margin: 4px auto 8px;
}
#award .list_zaiko.zaiko30 .price_wrap p.bg_coupon { background-color: #e8c574; }
#award .list_zaiko.zaiko20 .price_wrap p.bg_coupon { background-color: #bac3c6; }
#award .list_zaiko.zaiko10 .price_wrap p.bg_coupon { background-color: #ffc893; }

#award .list_zaiko .price_wrap p.price_sale {
	position: relative;
	font-size: 21px;
	font-weight: 700;
	color: var(--clr-ss-red-light);
}
#award .list_zaiko .price_wrap p.price_sale::after {
	position: relative;
	display: inline-block;
	vertical-align: 5px;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 2px var(--clr-ss-red-light);
	border-right: solid 2px var(--clr-ss-red-light);
	transform: rotate(45deg);
	margin-left: 4px;
}



/* ▼後で消す */
/* #award .list_zaiko .price_wrap {
	margin-top: auto;
	padding: 0 4px;
	line-height: 1;
}
#award .list_zaiko .price_wrap dl {
	display: flex;
	justify-content: flex-start;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

#award .list_zaiko .price_wrap dt,
#award .list_zaiko .price_wrap dd,
#award .list_zaiko .price_wrap dd span { line-height: 1; }

#award .list_zaiko .price_normal dt,
#award .list_zaiko .price_normal dd,
#award .list_zaiko .price_sale dt,
#award .list_zaiko .price_sale dd { font-size: 12px; }

#award .list_zaiko .price_normal dt,
#award .list_zaiko .price_normal dd { color: var(--clr-ss-black);}
#award .list_zaiko .price_sale { margin-top: 6px;}
#award .list_zaiko .price_sale dt { background-color: var(--bg-red01); padding: 4px; }
#award .list_zaiko .price_sale dd span { font-size: 150%; color: var(--bg-red01); font-weight: 700; } */

/* hover */
#award .list_zaiko li:hover a {
	opacity: 0.7;
}

/* 価格プロを使った場合 */
#award .list_zaiko .price_wrap .buy_price ul {
	position: relative;
	margin: auto;
}
#award .list_zaiko .price_wrap .buy_price ul::after {
	position: absolute;
	top: calc(50% - 4px);
	right: -12%;
	display: inline-block;
	vertical-align: -5px;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 2px var(--clr-ss-red-light);
	border-right: solid 2px var(--clr-ss-red-light);
	transform: rotate(45deg);
	margin-left: 4px;
}
#award .list_zaiko .price_wrap .buy_price ul li {
	color: var(--clr-ss-red-light);
	font-size: 21px;
	width: auto;
	background: none;
	margin: auto;
}
#award .list_zaiko .price_wrap .buy_price ul li.intax {
	font-size: 8px;
	color: var(--clr-ss-red-light)!important;
	margin-bottom: 1px !important;
	display: none;
}
#award .list_zaiko .price_wrap .buy_price ul li .spesicalprice { display: none!important; } 



/* #award .list_zaiko .buy_price ul {
	display: block;
	margin: auto;
}
#award .list_zaiko .buy_price ul li {
	color: #fff!important;
	font-size: 21px;
	width: auto;
	background: none;
	margin: auto;
}
#award .list_zaiko .buy_price ul li.intax,
#award .list_zaiko .buy_price ul li .spesicalprice { display: none!important; } */



/* 吹き出し */
#award .ballon {
	position: relative;
	display: inline-block;
	width: auto;
	color: var(--clr-ss-black);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	background-color: var(--aw-yallow02);
	margin: 0 auto 32px;
	padding: 0.75em 1.5em;
	border-radius: 24px;
}
#award .ballon::after {
	position: absolute;
	top: 90%;
	left: 50%;
	display: inline-block;
	content: "";
	width: 16px;
	height: 16px;
	background-color: var(--aw-yallow02);
	transform: rotate(45deg) translateX(-50%);
}
#award .ballon strong {
	color: var(--bg-red01);
	font-size: 150%;
	font-weight: 700;
	line-height: 1;
}









/* 福袋・新春セールエリア
================================================== */

#award .section#info_sale {
	color: var(--clr-ss-black)!important;
	background: url(/IMAGE/spaceperformance/25happybag/bg_kanban.jpg) repeat center center;
	padding: 32px;
	margin: 0 auto;
}
#award .section#info_sale p,
#award .section#info_sale h3,
#award .section#info_sale h4 {
	color: var(--clr-ss-black)!important;
}

#award h3.heading_info {
	font-size: 28px;
	line-height: 1;
	background-color: #fff;
	border: double 5px var(--bg-red01);
	padding: 0.5em 0;
}

#award .section#info_sale .sale_box {
	margin: 0 auto 48px;
}
#award .section#info_sale .sale_box h4 {
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 0.75em;
}
#award .section#info_sale .sale_box p.limited {
	font-weight: 700;
}



#award .section#info_sale .sale_box h4 span {
	position: relative;
	display: block;
	font-size: 75%;
	font-weight: 700;
}
#award .section#info_sale .sale_box h4 span::before,
#award .section#info_sale .sale_box h4 span::after {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	content: "";
	width: 1px;
	height: 20px;
	background-color: var(--clr-ss-black);
	margin: 0 8px;
}
#award .section#info_sale .sale_box h4 span::before { transform: rotate(-20deg); }
#award .section#info_sale .sale_box h4 span::after { transform: rotate(20deg); }

#award .sale_box div[class^="col_"] > li > p { margin-top: 1em; }



#award .list_happybag {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 64px;
	width: 100%;
	/* padding: 0 32px; */
	padding: 0;
	margin-bottom: 64px;
}
#award .list_happybag > li {
	position: relative;
	width: 100%;
}
#award .list_happybag > li::before,
#award .list_happybag > li::after {
	position: absolute;
	z-index: 1;
	left: 0;
	display: inline-block;
	content: "";
	width: 100%;
	height: 12px;
	background: url(/IMAGE/spaceperformance/25happybag/bg_stripe.gif) repeat-x top left;
}
#award .list_happybag > li > a {
	position: relative;
	width: 100%;
	display: block;
	background-color: #fff;
	background-image: url(/IMAGE/spaceperformance/25happybag/bg_kamifubuki.gif) ,url(/IMAGE/spaceperformance/25happybag/bg_kamifubuki.gif);
	background-repeat: no-repeat,no-repeat;
	background-position: top -20px right -80px, left -40px bottom -20px;
	padding: 48px 24px 40px;
}

/* アイコン類 */
#award .icon_fuku {
	position: absolute;
	z-index: 5;
	display: inline-block;
	width: 80px;
	height: auto;
}
#award .icon_fuku.icon_fuku_l { top: -24px; left: 8px; }


/* セット名 */
#award .list_happybag h3 {
	color: var(--clr-ss-black);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

/* 価格 */
#award .list_happybag .price_hb {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 8px auto;
}
#award .list_happybag .price_hb dt {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	background-color: var(--hb-red);
	padding: 0.5em;
}
#award .list_happybag .price_hb dd .buy_price .price,
#award .list_happybag .price_hb dd .buy_price .intax { color: var(--hb-red)!important; line-height: 1; }
#award .list_happybag .price_hb dd .buy_price .price { font-size: 40px; flex-flow: nowrap; }
#award .list_happybag .price_hb dd.tilde .buy_price .price::after {
	position: relative;
	display: inline;
	content: "〜";
	width: auto;
}
#award .list_happybag .price_hb dd .buy_price .intax { font-size: 12px;}
#award .list_happybag .price_hb dd .spesicalprice { display: none; }

/* 〇〇円相当 */
#award .list_happybag .p_side_line {
	position: relative;
	color: var(--clr-ss-black);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
}
#award .list_happybag .p_side_line::before,
#award .list_happybag .p_side_line::after {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	content: "";
	height: 20px;
	width: 1px;
	background-color: var(--clr-ss-black);
	margin: 0 0.5em;
}
#award .list_happybag .p_side_line::before { transform: rotate(-20deg);}
#award .list_happybag .p_side_line::after { transform: rotate(20deg);}

/* 商品画像 */
#award .list_happybag img.img_set {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(4px 4px 4px rgba(184,177,150,0.35));
}

/* ついてくる */
#award .list_happybag .p_spe {
	position: relative;
	color: var(--hb-red);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0.75em auto;
	padding: 0.5em 0;
	background-color: #f1f1f1;
}
#award .list_happybag .p_spe span {
	font-size: 125%;
	font-weight: 700;
	line-height: 1;
}

/* セット内容 */
#award .list_happybag .set_hb {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0;
	margin-top: 8px;
}
#award .list_happybag .p_spe + .set_hb { margin-top: 0; }
#award .list_happybag .set_hb dt { width: 140px;}

#award .list_happybag .set_hb dt,
#award .list_happybag .set_hb dd {
	display: flex;
	align-items: center;
	font-size: 14px;
	line-height: 1.5;
	padding: 0.5em 1em;
	border:solid 1px var(--main-clr-lightbeige);
}
#award .list_happybag .set_hb dt {
	position: relative;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	line-height: 1;
	background-color: var(--main-clr-lightbeige);
}
#award .list_happybag .set_hb dd {
	flex: 1;
}
#award .list_happybag .list_details {
	margin-left: 1.5em;
	letter-spacing: normal;
}
#award .list_happybag .list_details > li {
	list-style-type: disc;
	letter-spacing: normal;
	color: var(--clr-ss-black);
	font-size: 13px;
	text-align: left;
}

/* ボタン */
#award .list_happybag .btn_hb {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: -30px;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60%;
	height: 48px;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	background-color: var(--hb-yellow);
	border: solid 3px var(--hb-yellow);
	border-radius: 8px;
}
#award .list_happybag .btn_hb::after {
	position: absolute;
	display: inline-block;
	content: "";
	top: calc(50% - 4px);
	right: 8%;
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}

/* hover */
#award .list_happybag li a img.img_set,
#award .list_happybag li a .btn_hb,
#award .list_happybag li a .btn_hb::after,
#award .list_happybag li:hover a img.img_set,
#award .list_happybag li:hover a .btn_hb,
#award .list_happybag li:hover a .btn_hb::after {
	transition: all 0.2s;
}

#award .list_happybag li:hover a img.img_set {
	transform: scale(1.05);
	filter: drop-shadow(4px 4px 4px rgba(190,143,50,0.65));
}
#award .list_happybag li:hover a .btn_hb {
	color: var(--hb-yellow);
	background-color: #fff;
	border-radius: 8px;
}
#award .list_happybag li:hover a .btn_hb::after {
	right: 6%;
	border-color: var(--hb-yellow);
}


/* 価格プロ 共通設定
================================================== 

#award .wrap_price,
#award .wrap_price .buy_price,
#award .wrap_price .price { position: relative; }
#award .wrap_price .spesicalprice { display: none; }

#award .wrap_price .buy_price { display: inline-block; width: auto; }
#award .wrap_price .buy_price::before,
#award .wrap_price .buy_price::after {
	position: absolute;
	display: inline-block;
	content: "";
}
#award .wrap_price .buy_price::after {
	top: calc(50% - 2px);
	left: 108%;
	width: 4px;
	height: 4px;
	border-top: solid 1px var(--clr-ss-black);
	border-right: solid 1px var(--clr-ss-black);
	transform: rotate(45deg);
}
#award .wrap_price .price,
#award .wrap_price .intax { color: var(--clr-ss-red-light)!important; }
#award .wrap_price .price { font-size: 20px; font-weight: 400; }

#award .wrap_price.price_tilde .price { display: inline!important; }
#award .wrap_price.price_tilde .price::after {
	display: inline;
	color: var(--clr-ss-red-light)!important;
	content: "〜";
}*/




/* ==================================================
   PC左側 / PC右側
================================================== */

#award .pc_left,
#award .pc_right {
	position: sticky;
	width: calc((100% - 560px)/2);
	/*top: 0;
	height: 100vh;*/
	display: flex;
	justify-content: center;
	align-items: center;
}
#award .pc_left > .inner,
#award .pc_right > .inner {
	text-align: center;
	padding: 0 16%;
}



/*  PC用 左側
================================================== */

#award .pc_left {
	order: 1;
}

#award .pc_left nav ul {
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
	box-sizing: border-box;
}
#award .pc_left nav ul li {
	position: relative;
	width: calc((100% - 8px*2)/3);
	display: flex;
}

#award .pc_left nav ul li a {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	color: var(--clr-ss-black);
	font-size: 12px;
	line-height: 1.5;
	background-color: var(--aw-yallow02);
	border: solid 1px var(--clr-ss-black);
	border-radius: 8px;
	padding: 1em;
}
#award .pc_left nav ul li a::after {
	position: absolute;
	top: calc(50% - 2px);
	right: 8px;
	display: inline-block;
	content: "";
	width: 4px;
	height: 4px;
	border-top: solid 1px var(--clr-ss-black);
	border-right: solid 1px var(--clr-ss-black);
	transform: rotate(45deg);
	transition: all 0.2s;	
}
#award .pc_left nav ul li a span {
	display: inline-block;
	width: auto;
	text-align: left;
	font-size: 16px;
	font-weight: 700;
}
#award .pc_left nav ul li a strong {
	color: var(--clr-ss-black);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.1;
	text-align: left;
	margin-right: 4px;
}


#award .pc_left nav ul li.w100 { width: 100%; }
#award .pc_left nav ul li.w100 a {
	display: flex;
	justify-content: space-between;
	padding: 0;
}
#award .pc_left nav ul li.w100 a .icon {
	width: 25%;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	/* background-color: var(--main-clr-lightbeige); */
	background-color: var(--aw-yallow01);
	border-radius: 8px 0 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
#award .pc_left nav ul li.w100 a p {
	flex: 1;
	padding: 12px 24px 12px 0;
}


#award .pc_left nav ul li:hover > a {
	opacity: 0.8;
}
#award .pc_left nav ul li:hover > a::after {
	right: 4px;
}



/*  PC用 右側
================================================== */

#award .pc_right {
	order: 3;
	background: url(/IMAGE/award/bg.jpg) no-repeat center center;
	background-size: cover;
}

#award .pc_right h3 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 0.5em;
}


/* おすすめ特集 */
#award .list_bn {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
}

/* バナーが1つの場合 */
#award .list_bn > li { width: 100%; }

/* バナーが2つの場合 */
#award .list_bn:has(> :nth-child(2)) > li { width: calc((100% - 8px*1)/2); }

/* バナーが3つの場合 */
#award .list_bn:has(> :nth-child(3)) > li { width: calc((100% - 8px*2)/3); }

/* バナーが4つ以上の場合 */
#award .list_bn:has(> :nth-child(n+4)) > li { width: calc((100% - 8px*1)/2); }


@media screen and (max-width:1024px) {
	#award .pc_left,
	#award .pc_right {
		display: none;
	}
}


/* ==================================================
   スマホ側メニュー ※PC非表示
================================================== */

#fixed_menu { display: none!important; }

