@charset "UTF-8";
/* CSS Document */
/*--------------------
1.【新】お得なクーポン＆プラン/PC
2. メディアクエリ
--------------------*/
/*--------------------
1.【新】お得なクーポン＆プラン
--------------------*/ 
#couponlist strong {
	font-weight: bold;
}
#couponlist{
    background: url(../img/coupon/bg_yellow.png) repeat-y top center;
    background-size: 100% auto;
}
#couponlist .mainvisual {
	background-color: #BD7B2E;
	position: relative;
	z-index: 1;
}
#couponlist #first_area {
	padding: 50px 0;
}
#couponlist #first_area p {
	text-align: center;
	max-width: 823px;
	width: 100%;
	margin: 0 auto;
	font-size: 23px;
    line-height: 2.2em;
}
#couponlist #cnt_area01 {
	padding-bottom: 30px;
}
#couponlist #cnt_area01 .nav_g {
	margin-bottom: 60px;
	display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
}
#couponlist #cnt_area01 .nav_g li {
	min-width: 124px;
	width: calc(100% / 8);
	margin-right: -5px;
	background: #fff;
	text-align: center;
	border: 1px solid #000;
	color: #000;
	font-weight: bold;
	border-radius: 0px 5px 0px 0px;
	padding: 8px 8px 9px;
	font-size: 14px;
	z-index: 8;
	position: relative;
	box-shadow: 4px 4px 9px -5px rgb(0 0 0 / 50%);
}
#couponlist #cnt_area01 .nav_g li a {
	display: block;
}
#couponlist #cnt_area01 .nav_g li.group {
	border: 1px solid #ff7fbb;
	background: #ff7fbb;
	z-index: 7;
}
#couponlist #cnt_area01 .nav_g li.family {
	border: 1px solid #f19e4a;
	background: #f19e4a;
	z-index: 6;
}
#couponlist #cnt_area01 .nav_g li.meals {
	border: 1px solid #fdeb7f;
	background: #fdeb7f;
	z-index: 5;
}
#couponlist #cnt_area01 .nav_g li.stone {
	border: 1px solid #ed7d78;
	background: #ed7d78;
	z-index: 4;
}
#couponlist #cnt_area01 .nav_g li.private {
	border: 1px solid #77cbde;
	background: #77cbde;
	z-index: 3;
}
#couponlist #cnt_area01 .nav_g li.wellness {
	border: 1px solid #77a1ff;
	background: #77a1ff;
	z-index: 2;
}
#couponlist #cnt_area01 .nav_g li.app {
	border: 1px solid #957fc8;
	background: #957fc8;
	z-index: 1;
}
#couponlist #cnt_area01 .nav_g.cat {
	margin-bottom: 8px;
	overflow-y: hidden;
	padding-right: 50px;
}
#couponlist #cnt_area01 .nav_g.cat li {
	font-size: 12px;
	min-width: inherit;
	width: auto;
	padding: 6px 15px 7px;
	box-shadow: 2px 0px 11px -4px rgb(0 0 0 / 50%);
}
#couponlist #cnt_area01 .nav_g.cat li:nth-child(1) {
	z-index: 7;
}
#couponlist #cnt_area01 .nav_g.cat li:nth-child(2) {
	z-index: 6;
}
#couponlist #cnt_area01 .nav_g.cat li:nth-child(3) {
	z-index: 5;
}
#couponlist #cnt_area01 .nav_g.cat li:nth-child(4) {
	z-index: 4;
}
#couponlist #cnt_area01 .nav_g.cat li:nth-child(5) {
	z-index: 3;
}
#couponlist #cnt_area01 .nav_g.cat li:nth-child(6) {
	z-index: 2;
}
#couponlist #cnt_area01 .nav_g.cat li:nth-child(7) {
	z-index: 1;
}
#couponlist #cnt_area01 .cnt_g{
	display: flex;
	flex-flow: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin-right: -40px;
}
#couponlist #cnt_area01 .cnt_g .cnt_box {
	display: block;
	width: 350px;
	margin: 0 40px 40px 0;
	background: #fff;
	position: relative;
}
#couponlist #cnt_area01 .cnt_g .cnt_box01 {
	box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 20%);
}
#couponlist #cnt_area01 .cnt_g .cnt_box02 {
	box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 20%);
}
#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge {
	position: absolute;
	right: -20px;
	top: -20px;
	z-index: 9;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge p {
	color: #fff;
	font-size: 14px;
	line-height: 1.3;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.06em;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge.gray {
	background-color: #949BB2;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge.rose {
	background-color: #d25183;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge.orange {
	background-color: #e5921f;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge.navy {
	background-color: #142F59;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge.green {
	background-color: #06C755;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .cnt_img {
	overflow-x: hidden;
	padding-bottom: 12px;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .img_wrap {
	padding-bottom: 12px;
	box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 20%);
}
#couponlist #cnt_area01 .cnt_g .cnt_box .cnt_text {
	padding: 8px 18px 18px;
	text-align: center;
	line-height: 1.4;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .cnt_text .catchphrase,
#couponlist #cnt_area01 .cnt_box .cnt_text .title,
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .coupon_detail,
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .target {	
	font-family: 'Noto Sans JP', sans-serif;
}
#couponlist #cnt_area01 .cnt_g .cnt_box .cnt_text .catchphrase {
	font-size: 14px;
	line-height: 1.2;
	padding: 0.2em 0.5em 0.3em;
	margin-bottom: 0.9em;
}
#couponlist #cnt_area01 .cnt_box .cnt_text .title {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 0.6em;
}
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .coupon_detail {	
	margin-bottom: 1.2em;
}
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .target {	
	/*font-weight: bold;
	line-height: 1.1;*/
	margin-bottom: 0.5em;
	/*display: flex;
	justify-content: center;*/
}
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .target .coupon_target {
	font-size: 15px;
}
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .target .coupon_price {	
	vertical-align: bottom;
	font-family: 'Noto Sans JP', sans-serif;
	color: #d13933;
}
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .use {
	text-align: left;
	position: relative;
	font-size: 13px;
	margin-top: 1.5em;
}
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .use .coupon_use_head {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	position: absolute;
}
#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .use .coupon_use {
	margin-left: 4.8em;
}
#couponlist #cnt_area01 .cnt_box .coupon_ticket {
	padding: 8px 18px 12px;
}
#couponlist #cnt_area01 .cnt_box .coupon_ticket .coupon_include {
	display: flex;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
#couponlist #cnt_area01 .cnt_box .coupon_ticket .coupon_include p {
	background-color: #fff;
	font-size: 12px;
	font-weight: bold;
	padding: 0.3em 0.6em;
	margin-right: 5px;
	margin-bottom: 5px;
}
#couponlist #cnt_area01 .cnt_box .coupon_ticket .coupon_link {
}
#couponlist #cnt_area01 .cnt_box .coupon_ticket .coupon_link a {
	display: block;
	background-color: #d13933;
	padding: 0.6em 0.6em 0.7em;
	border-radius: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
	transition: all .3s;
	line-height: 1.3;
}
#couponlist #cnt_area01 .cnt_box .coupon_ticket .coupon_link a:hover {
	opacity: 0.7;
}
.coupon_color.pink {
	background-color: #f8c0be;
}
.coupon_color.purple {
	background-color: #cca2d2;
}
.coupon_color.brown {
	background-color: #daa87f;
}
.coupon_color.orange {
	background-color: #ffbb5c;
}
.coupon_color.cream {
	background-color: #f8e296;
}
.coupon_color.green {
	background-color: #badaa8;
}
.coupon_color.olive {
	background-color: #bec6a6;
}
.coupon_color.blue {
	background-color: #9db8de;
}
.coupon_color.aqua {
	background-color: #9fd8ec;
}
.coupon_color.emerald {
	background-color: #9ae4dd;
}
#couponlist #cnt_area01 .cnt_box .coupon_bg {
	position: relative;
    top: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
	overflow: hidden;
	height: 30px;	
    display: flex;
    align-items: center;
    justify-content: center;
	z-index: 2;
}
#couponlist #cnt_area01 .cnt_box .coupon_bg_circle,
#couponlist #cnt_area01 .cnt_box .coupon_bg ul li {
    border-radius: 50%;
    background-color: #fcf4e3;
    margin: 0 3px;
    box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 20%) inset;
}
#couponlist #cnt_area01 .cnt_box .coupon_bg_circle {
	width: 30px;
    height: 30px;	
	position: absolute;
}
#couponlist #cnt_area01 .cnt_box .coupon_bg_circle.left {
    top: 0;
    left: -15px;	
}
#couponlist #cnt_area01 .cnt_box .coupon_bg_circle.right {
    top: 0;
    right: -15px;	
}
#couponlist #cnt_area01 .cnt_box .coupon_bg ul {
	display: flex;
}
#couponlist #cnt_area01 .cnt_box .coupon_bg ul li {
	width: 10px;
    height: 10px;
	margin: 0 4px;
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.pink { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #f8c0be 50%, #f8c0be 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.purple { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #cca2d2 50%, #cca2d2 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.brown { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #daa87f 50%, #daa87f 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.orange { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #ffbb5c 50%, #ffbb5c 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.cream { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #f8e296 50%, #f8e296 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.green { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #badaa8 50%, #badaa8 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.olive { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #bec6a6 50%, #bec6a6 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.blue { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #9db8de 50%, #9db8de 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.aqua { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #9fd8ec 50%, #9fd8ec 100%);
}
#couponlist #cnt_area01 .cnt_box .coupon_bg.emerald { 
	background: linear-gradient(180deg, #fff 0%, #fff 50%, #9ae4dd 50%, #9ae4dd 100%);
}
/*--------------------
2. メディアクエリ
--------------------*/
@media only screen and (max-width: 789px){
	#couponlist #cnt_area01 .nav_g li {
		width: 25%;
	}
	#couponlist #cnt_area01 .cnt_g {
		margin-right: -5%;		
	}
	#couponlist #cnt_area01 .cnt_g .cnt_box {
		width: 45%;
		margin-right: 5%;
	}
}
@media only screen and (max-width: 555px){
	#couponlist #first_area {
		padding: 30px 0;
	}
	#couponlist #cnt_area01 .nav_g {
		margin-bottom: 30px;
	}
	#couponlist #cnt_area01 .nav_g li {
		width: 50%;
	}
	#couponlist #first_area p {
		font-size: min(20px, 4.3vw);
	}
	#couponlist #cnt_area01 .nav_g.cat li {
    	font-size: 11px;
		padding: 6px 6px 7px;
	}
	#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge {
		right: -15px;
		top: -15px;
		width: 60px;
		height: 60px;
		padding: 5px;
	}
	#couponlist #cnt_area01 .cnt_g .cnt_box .coupon_badge p {
		font-size: 12px;
	}
	#couponlist #cnt_area01 .cnt_g .cnt_box .cnt_text {
		padding: 2px 8px 10px;
	}
	#couponlist #cnt_area01 .cnt_box .cnt_text .title {
    	font-size: 17px;
	}
	#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .coupon_detail {
    	font-size: 14px;
	}
	#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .use {
		text-align: center;
	}
	#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .use .coupon_use_head {
		position: relative;
		margin-bottom: 0.5em;
	}
	#couponlist #cnt_area01 .cnt_box .cnt_text .coupon_content .use .coupon_use {
		margin: auto;
		text-align: left;
	}
	#couponlist #cnt_area01 .cnt_box .coupon_ticket .coupon_include p {
		font-size: 10px;
	}
	#couponlist #cnt_area01 .cnt_box .coupon_ticket .coupon_link a {
		font-size: 11px;
	}
	#couponlist #cnt_area01 .cnt_box .coupon_bg {
		height: 16px;
	}
	#couponlist #cnt_area01 .cnt_box .coupon_bg_circle {
		width: 16px;
		height: 16px;
	}
	#couponlist #cnt_area01 .cnt_box .coupon_bg_circle.left {
		left: -8px;
	}
	#couponlist #cnt_area01 .cnt_box .coupon_bg_circle.right {
		right: -8px;
	}
	#couponlist #cnt_area01 .cnt_box .coupon_bg ul li {
		width: 7px;
		height: 7px;
	}
}