@charset "UTF-8";

/*
==============================================================
	Cecile TOP layout CSS
	Version: 31th Aug. 2017
============================================================ */

/* ========================================
	共通設定
======================================== */
.morebtn {
	width: 300px;
	height: 36px;
	margin: 0 auto;
}

.morebtn a {
	background: #777777;
	border: solid 1px #777777;
	color: #ffffff;
	display: block;
	border-radius: 50px;
	text-align: center;
	line-height: 36px;
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

.morebtn a:hover {
	background: #444444;
}

.itemlist {
	width: 980px;
	margin: 0;
}

@media screen and (max-width: 1280px) {
	.itemlist {
		width: 730px;
		margin: 0;
	}
}

.itemlist ul:after {
	content: "";
	display: block;
	clear: both;
}

.itemlist ul li {
	width: 230px;
	float: left;
	margin: 25px 0 0 20px;
	position: relative;
}

.itemlist ul li:nth-child(4n+1) {
	margin: 25px 0 0;
	clear: both;
}

@media screen and (max-width: 1280px) {
	.itemlist ul li:nth-child(4n+1) {
		margin: 25px 0 0 20px;
		clear: none;
	}
	.itemlist ul li:nth-child(3n+1) {
		margin: 25px 0 0;
		clear: both;
	}
}

.itemlist ul li a {
	text-decoration: none;
	display: block;
}

.itemlist ul li a:hover {
	text-decoration: underline;
}

.itemlist ul li .itemimg img {
	border: solid 1px #f0eeeb;
	border-radius: 3px;
	width: 230px;
	height: auto;
}


.itemlist ul li .itemimg span {
	display: block;
	margin: 12px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .itemlist ul li .itemimg span {
	display: block;
	margin: 12px 0 0;
  }
}

.itemlist ul li .itemprice {
	margin: 10px 0 0;
}

.itemlist ul li .itemprice span {
	font-size: 114%;
}

.side .btn {
	width: 190px;
	height: 36px;
	margin: 0 auto;
}

.side .btn a {
	font-size: 114%;
	color: #ffffff;
	display: block;
	border-radius: 50px;
	text-align: center;
	line-height: 36px;
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

.side .btn a:hover {
	text-decoration: none;
}

.side .morebtn {
	width: 230px;
	height: 36px;
	margin: 0 auto;
}

.side .morebtn a {
	background: #777777;
	border: solid 1px #777777;
	color: #ffffff;
	display: block;
	border-radius: 50px;
	text-align: center;
	line-height: 36px;
	text-decoration: none;
}

.side .morebtn a:hover {
	background: #444444;
}
/* ========================================
	メインコンテンツ：attention
======================================== */
.attention {
	background: #ffeded;
	border-radius: 3px;
	width: 1240px;
	margin: 40px auto 0;
}

@media screen and (max-width: 1280px) {
	.attention {
		width: 990px;
	}
}

.attention p {
	text-align: left;
}

.attention p a {
	display: block;
	text-decoration: underline;
	padding: 13px 0;
	font-size: 129%;
	color: #990000;
	text-shadow: 1px 1px 1px #ffffff;
}

.attention p a span {
	display: block;
	width: 90%;
	margin: 0 auto;
}

.attention p a:hover {
	text-decoration: none;
}

.attention + .attention {
	margin: 2px auto 0;
}

/* ========================================
	メインコンテンツ：notice-area
======================================== */
.notice-area {
	width: 100%;
	margin: 40px auto 0;
}

.attention + .notice-area {
	margin: 2px 0 0;
}

.notice-area div {
	background: #f7f6f4;
	border-radius: 3px;
	text-align: center;
	width: 1240px;
	margin: 0 auto;
	padding: 13px 0;
}

.notice-area div + div {
	margin: 2px auto 0;
}

@media screen and (max-width: 1280px) {
	.notice-area div {
		width: 990px;
	}
}

.notice-area a {
	display: block;
	margin: 0 auto;
	text-decoration: none;
	text-shadow: 1px 1px 1px #ffffff;
}

.notice-area dl {
	width: 90%;
	text-align: left;
	margin: 0 auto;
	font-size: 129%;
}

.notice-area dl:after {
	content:"";
	display: block;
	clear: both;
}

.notice-area a dl dd {
	text-decoration: underline;
}

.notice-area a:hover dl dd {
	text-decoration: none;
}

.notice-area dl dt,
.notice-area dl dd {
	display: block;
	float: left;
}

.notice-area dl dt {
	width: 11em;
}

.notice-area dl dd {
	width: calc(100% - 11em);
}
/* ========================================
	メインコンテンツ：keyvarea
======================================== */
html.enablejs .keyvarea {
	overflow: hidden;
	position: relative;
	margin-bottom: 30px;
}

html.enablejs .keyvarea:after{
	content: "";
	display: block;
	clear: both;
}

html.enablejs .keyv {
	width: 100%;
	text-align: center;
	position: relative;
	overflow: hidden;
	visibility: hidden;
	height: 652px;
}

html:not(.enablejs) .keyv {
	margin: 0 auto;
	width: 1240px;
}

html:not(.enablejs) .keyv ul {
	margin: 0 auto;
}

html:not(.enablejs) .keyv ul li {
	text-align: center;
	overflow: hidden;
}

html.enablejs .keyv ul li:first-child img {
	width: 1060px;
	height: 612px;
	text-align: center;
	/*visibility: visible;*/
}

html.enablejs .keyv ul li~li img {
	width: 1060px;
	height: 612px;
	text-align: center;
	/*visibility: hidden;*/
}

html.enablejs .keyv .slick-list {
	background: #dddddd;
}

html.enablejs .keyv .slick-list a {
	max-height: 612px;
	display: block;
}

/*use slick*/

.keyv ul {
	display: none;
}

.keyv ul.slick-initialized {
	display: block;	/* slick-initialized付与タイミングで表示 */
}

.slick-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	overflow: hidden;
	width: 100%;
	height: 612px;
	border: 0;
	text-indent: -9999px;
	cursor: pointer;
	outline: none;
	opacity: 0.5;
	transition-property: all;
	transition: 0.3s linear;
	/*visibility: hidden;*/
}

.slick-prev {
	right: calc(100% - (50% - 530px));
	background: #000 url(/component/common/img/pc/top/keyv_prev.png) no-repeat right center;
}


.slick-next {
	left: calc(100% - (50% - 530px));
	background: #000 url(/component/common/img/pc/top/keyv_next.png) no-repeat 0 center;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    /*color: transparent;
    outline: none;
    background: transparent;*/
	opacity: 0.3;
}

.slick-prev:before {
	content: '←';
}

[dir='rtl'] .slick-prev:before {
	content: '→';
}

.slick-next:before {
	content: '→';
}

[dir='rtl'] .slick-next:before {
	content: '←';
}

.slick-dots {
	margin: 10px 0 0;
}

.slick-dots li {
	width: 8px;
	height: 8px;
	background: #d9d9d9;
	border-radius: 50%;
	margin: 8px;
	display: inline-block;
	cursor: pointer;
	text-indent: -9999px;
}

.slick-dots li.slick-active {
	background: #9c154f;
}

.slick-dots > li:first-child:last-child {
    display: none;
}
/* ========================================
	メインコンテンツ：contents
======================================== */
#contents {
	box-sizing: border-box;
	margin: 40px auto 0;
}

#contents:after {
	content: "";
	display: block;
	clear: both;
}

@media screen and (max-width: 1280px) {
	#contents {
		width: 980px;
	}
}
/* ========================================
	メインコンテンツ：main
======================================== */
.main {
	width: 980px;
	float: right;
	box-sizing: border-box;
	margin: 0;
}

@media screen and (max-width: 1280px) {
	.main {
		width: 730px;
	}
}
/* ========================================
	メインコンテンツ：categories
======================================== */
.categories {
	margin: 0;
}

.categories ul {
	margin: 0 0 -20px;
}

.categories ul:after {
	content: "";
	display: block;
	clear: both;
}

.categories ul li {
	width: 310px;
	float: left;
	margin: 0 0 20px 25px;
}

@media screen and (max-width: 1280px) {
	.categories ul li {
		width: 230px;
		float: left;
		margin: 0 0 20px 20px;
	}
}

.categories ul li:nth-child(3n+1) {
	clear: both;
	margin: 0 0 20px;
}

.categories ul li h2 {
	background: #f7f6f4;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	position: relative;
	margin-bottom: 2px;
	font-size: 114%;
	width: 100%;
	display: table;
}

.categories ul li h2 img {
	display: table-cell;
	width: 68px;
	vertical-align: middle;
}


.categories ul li.big h2,
.categories ul li.size h2,
.categories ul li.catalog h2 {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.categories ul li h2 a {
	display: table-cell;
	text-decoration: none;
	text-align: left;
	width: 242px;
	padding-right: 10px;
	vertical-align: middle;
}

@media screen and (max-width: 1280px) {
	.categories ul li h2 a {
		width: 162px;
	}
}

.categories ul li h2 a:hover {
	text-decoration: underline;
}

.categories ul li p {
	background: #f7f6f4;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.categories ul li p span {
	display: block;
	padding: 13px 20px;
}

.categories ul li p a {
	text-decoration: none;
}

.categories ul li p a:hover {
	text-decoration: underline;
}
/* ========================================
	メインコンテンツ：pickup-box
======================================== */
.pickup-box {
	margin: 60px 0 0;
}

.pickup-box h2 {
	font-size: 171%;
	text-align: center;
}

.pickup-box .item {
	width: 980px;
	margin: 20px 0 0;
}

@media screen and (max-width: 1280px) {
	.pickup-box .item {
		width: 730px;
	}

	.pickup-box .item img {
		width: 730px;
		height: auto;
	}
}

.pickup-box .item img {
	border-radius: 3px;
}

.pickup-box .itemdetail {
	width: 980px;
	margin: 18px 0;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemdetail {
		width: 730px;
	}
}

.pickup-box .itemdetail:after {
	content: "";
	display: block;
	clear: both;
}

.pickup-box .itemdetail .img {
	width: 480px;
	float: left;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemdetail .img {
		width: 355px;
		height: auto;
	}

	.pickup-box .itemdetail .img div img {
		width: 355px;
		height: auto;
	}
}

.pickup-box .itemdetail .img div:nth-child(2) {
	vertical-align: top;
	padding-top: 96px;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemdetail .img div:nth-child(2) {
		padding-top: 70px;
	}

	.pickup-box .itemdetail .img div:nth-child(2) img {
		width: 25px;
	}
}

.pickup-box .itemdetail .img div span {
	display: inline-block;
	margin: 14px 0 0;
	font-size: 114%;
}

.pickup-box .itemdetail .txt {
	width: 480px;
	float: right;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemdetail .txt {
		width: 355px;
	}
}

.pickup-box .itemdetail .txt .title {
	font-size: 171%;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemdetail .txt .title {
		font-size: 129%;
	}
}

.pickup-box .itemdetail .txt .lead {
	margin: 14px 0 0;
}

.pickup-box .itemdetail .txt .itemname {
	font-size: 114%;
	margin: 14px 0 0;
}

.pickup-box .itemdetail .txt .itemname a {
	text-decoration: none;
}

.pickup-box .itemdetail .txt .itemname a:hover {
	text-decoration: underline;
}

.pickup-box .itemdetail .txt .itemprice {
	font-size: 128%;
	margin: 11px 0 0;
}

.pickup-box .itemdetail .txt .itemprice span {
	font-size: 111%;
}

.pickup-box .itemlist-l {
	width: 980px;
	margin: 27px 0 0;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemlist-l {
		width: 730px;
	}
}

.pickup-box .itemlist-l:after {
	content: "";
	display: block;
	clear: both;
}

.pickup-box .itemlist-l li {
	width: 480px;
	float: left;
	margin: 0 0 0 20px;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemlist-l li {
		width: 355px;
	}
}

.pickup-box .itemlist-l li:nth-child(2n+1) {
	margin: 0;
}

.pickup-box .itemlist-l li .itemimg img {
	border-radius: 3px;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemlist-l li .itemimg img {
		width: 355px;
		height: auto;
	}
}

.pickup-box .itemlist-l li .title {
	font-size: 143%;
	margin: 12px 0 0;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemlist-l li .title {
		font-size: 129%;
	}
}

.pickup-box .itemlist-l li .lead {
	font-size: 86%;
	margin: 12px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .pickup-box .itemlist-l li .lead {
	display: block;
	margin: 12px 0 0;
  }
}

.pickup-box .itemlist-l li .itemname {
	margin: 12px 0 0;
}

.pickup-box .itemlist-l li .itemname a {
	text-decoration: none;
}

.pickup-box .itemlist-l li .itemname a:hover {
	text-decoration: underline;
}

.pickup-box .itemlist-l li .itemprice {
	margin: 11px 0 0;
}

.pickup-box .itemlist-l li .itemprice span {
	font-size: 114%;
}

@media screen and (max-width: 1280px) {
	.pickup-box .itemlist li:nth-child(7),
	.pickup-box .itemlist li:nth-child(8) {
		display: none;
	}
}




/* ========================================
	メインコンテンツ：coordinate-box
======================================== */
.coordinate-box {
	margin: 60px 0 0;
}

.coordinate-box h2 {
	font-size: 171%;
	text-align: center;
}

.coordinate-box ul {
	margin: -10px 0 0;
}

.coordinate-box ul:after {
	content: "";
	display: block;
	clear: both;
}

.coordinate-box ul li {
	width: 230px;
	float: left;
	margin: 40px 0 0 20px;
}

.coordinate-box ul li:nth-child(4n+1) {
	margin: 40px 0 0;
	clear: both;
}

@media screen and (max-width: 1280px) {
	.coordinate-box ul li:nth-child(4n+1) {
		margin: 40px 0 0 20px;
		clear: none;
	}

	.coordinate-box ul li:nth-child(3n+1) {
		margin: 40px 0 0;
		clear: both;
	}

	.coordinate-box ul li:nth-child(7),
	.coordinate-box ul li:nth-child(8) {
		display: none;
	}
}

.coordinate-box ul li img {
	width: 230px;
	border-radius: 3px;
}

.coordinate-box .morebtn {
	margin-top: 40px;
}
/* ========================================
	メインコンテンツ：ranking-box/voice-box
======================================== */
.ranking-box,
.voice-box {
	margin: 60px 0 0;
}

.ranking-box h2,
.voice-box h2 {
	font-size: 171%;
	text-align: center;
}

.ranking-box .menu,
.voice-box .menu {
	margin: 20px 0 28px;
}

.ranking-box .menu ul,
.voice-box .menu ul {
	margin: 0 auto;
	text-align: center;
}

.ranking-box .menu ul:after,
.voice-box .menu ul:after {
	content: "";
	display: block;
	clear: both;
}

.ranking-box .menu ul li,
.voice-box .menu ul li {
	position: relative;
	display: inline-block;
	background: #f7f6f4;
	line-height: 38px;
	text-align: center;
	padding: 0 15px;
	margin-left: 5px;
	border-radius: 3px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

@media screen and (max-width: 1280px) {
	.ranking-box .menu ul li.uniform,
	.ranking-box .menu ul li.beauty,
	.ranking-box .menu ul li.big,
	.voice-box .menu ul li.uniform,
	.voice-box .menu ul li.beauty,
	.voice-box .menu ul li.big {
		display: none;
	}
}

.ranking-box .menu ul li:first-child,
.voice-box .menu ul li:first-child {
	margin-left: 0;
}

.ranking-box .menu ul li:hover,
.voice-box .menu ul li:hover {
	background: #9c154f;
	color: #ffffff;
}

.ranking-box .menu ul li.select,
.voice-box .menu ul li.select {
	background: #9c154f;
	color: #ffffff;
}

.ranking-box .menu ul li.select:before,
.voice-box .menu ul li.select:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -8px;
	border: 6px solid transparent;
	border-top: 8px solid #9c154f;
}

.ranking-box .itemlist ul,
.voice-box .itemlist ul {
	margin: -10px 0 0;
}

.ranking-box .itemlist ul.select,
.voice-box .itemlist ul.select {
	display: block;
}

.ranking-box .itemlist li .rank {
	position: absolute;
	top: -3px;
	left: -3px;
	width: 24px;
	height: 24px;
	background: #444444;
	border: solid 1px #ffffff;
	border-radius: 12px;
	color: #ffffff;
	text-indent: 0;
	text-align: center;
	font-size: 14px;
	z-index: 200;
}

.ranking-box .itemlist li:nth-child(1) .rank {
	background: #d0b247;
	color: #ffffff;
	text-shadow: 1px 1px 1px #acacac;
}

.ranking-box .itemlist li:nth-child(2) .rank {
	background: #859099;
	color: #ffffff;
	text-shadow: 1px 1px 1px #acacac;
}

.ranking-box .itemlist li:nth-child(3) .rank {
	background: #734a22;
	color: #ffffff;
	text-shadow: 1px 1px 1px #acacac;
}

@media screen and (max-width: 1280px) {
	.ranking-box .itemlist ul li:nth-child(7),
	.ranking-box .itemlist ul li:nth-child(8),
	.voice-box .itemlist ul li:nth-child(7),
	.voice-box .itemlist ul li:nth-child(8) {
		display: none;
	}
}

.ranking-box .morebtn,
.voice-box .morebtn {
	margin-top: 40px;
}

.voice-box .itemlist li .voice {
	line-height: 1;
	position: absolute;
	top: 248px;
}

.voice-box .itemlist li .voice img {
	display: inline-block;
	margin: 0;
	width: 107px;
	height: 20px;
}


.voice-box .itemlist li .itemimg span {
	margin: 58px 0 0;
}


/* ========================================
	メインコンテンツ：special-box
======================================== */
.special-box {
	margin: 60px 0 0;
}

.special-box h2 {
	font-size: 171%;
	text-align: center;
}

.special-box .itemlist ul {
	margin: -10px 0 0;
}

.special-box .itemlist ul li {
	margin: 40px 0 0 20px;
}

.special-box .itemlist ul li:nth-child(4n+1) {
	margin: 40px 0 0;
}

@media screen and (max-width: 1280px) {
	.special-box .itemlist ul li:nth-child(4n+1) {
		margin: 40px 0 0 20px;
		clear: none;
	}

	.special-box .itemlist ul li:nth-child(3n+1) {
		margin: 40px 0 0;
		clear: both;
	}

	.special-box .itemlist ul li:nth-child(10),
	.special-box .itemlist ul li:nth-child(11),
	.special-box .itemlist ul li:nth-child(12) {
		display: none;
	}
}

.special-box .itemlist ul li .itemimg img {
	border: none;
}

.special-box .itemlist ul li .itemimg span {
	font-size: 114%;
	margin: 12px 0 0;
}

.special-box .itemlist ul li .caption {
	font-size: 86%;
	margin: 8px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .special-box .itemlist ul li .caption {
	display: block;
	margin: 8px 0 0;
  }
}
.special-box .morebtn {
	margin-top: 40px;
}

/* ========================================
	サブコンテンツ:side
======================================== */
.side {
	width: 230px;
	float: left;
	margin: 0;
}

.side .affiliate-link {
	background: #f7f6f4;
	padding: 13px 20px;
	margin: 40px 0 0;
	text-shadow: 1px 1px 1px #ffffff;
	border-radius: 3px;
}

.side .affiliate-link a {
	text-decoration: none;
}

.side .affiliate-link a:hover {
	text-decoration: underline;
}
/* ========================================
	サブコンテンツ:login-box
======================================== */
.login-box {
	margin: 0;
	padding: 0;
}

.login-box .link2 {
	text-align: right;
	margin: 12px 0 0;
	text-shadow: 1px 1px 1px #ffffff;
}

.login-box .link2 a {
	background: url(/component/common/img/pc/top/arrow_link2.png) left center no-repeat;
	font-size: 86%;
	padding-left: 5px;
	text-decoration: none;
}

.login-box .link2 a:hover {
	text-decoration: underline;
}

.login,
.first {
	background: #f7f6f4;
	text-align: center;
	padding: 30px 15px;
}

.login2 {
	background: #f7f6f4;
	text-align: center;
	padding: 20px 15px 13px 15px;
}

.point-new {
	background: #f7f6f4;
	text-align: center;
	padding: 13px 0 20px 0;
}

.login,
.login2 {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.first,
.point-new {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	margin-top: 2px;
}

.login .username,
.first .username {
	font-size: 129%;
	text-shadow: 1px 1px 1px #ffffff;
}

.login2 .username2 {
	margin: 10px 0 0;
	font-size: 114%;
	text-shadow: 1px 1px 1px #ffffff;
}

.login2 .username2 span.rankname {
	font-size: 100%;
	font-weight: bold;
}

.login2 .username2 span {
	font-size: 87.5%;
}

.login2 .icon {
	margin-top: -40px;
}

.login2 .icon img {
	height: 47px;
	width: auto;
	margin: auto;
}

.login2 .icon img[alt="ダイヤモンド会員"] {
	height: 47px;
	width: 54px;
	margin: auto;
}

.login2 .icon img[alt="プラチナ会員"] {
	height: 47px;
	width: 36px;
	margin: auto;
}

.login2 .icon img[alt="ゴールド会員"] {
	height: 47px;
	width: 36px;
	margin: auto;
}

.login2 .icon img[alt="ブロンズ会員"] {
	height: 47px;
	width: 36px;
	margin: auto;
}

.login2 .icon img[alt="通常会員"] {
	height: 47px;
	width: 40px;
	margin: auto;
}

.login2 .icon img[alt="法人会員"] {
	height: 47px;
	width: 40px;
	margin: auto;
}

.login2 .ussrrank {
	margin: 12px 0 0;
	font-size: 86%;
	text-shadow: 1px 1px 1px #ffffff;
}

.login2 .rankupcamp {
	margin: 12px 0 0;
	font-size: 86%;
	text-shadow: 1px 1px 1px #ffffff;
}

.login2 .rankupcamp span {
	font-size: 129%;
    font-weight: bold;
}

.point-new {
	text-align: left;
}

.point-new .point-area {
	width: 100%;
	display: table;
	padding: 0 15px;
}

.point-new .point-area p:first-child {
	font-size: 86%;
	display: table-cell;
	vertical-align: top;
	text-shadow: 1px 1px 1px #ffffff;
}

.point-new .point-area p:last-child {
	font-size: 267%;
	display: table-cell;
	vertical-align: 15px;
	text-align: right;
	line-height: 1;
	font-weight: bold;
	text-shadow: 1px 1px 1px #ffffff;
}


.point-new .limit-area {
	margin: 8px 0 0;
	width: 100%;
	display: table;
	padding: 0 15px;
}

.point-new .limit-area p:first-child {
	font-size: 86%;
	display: table-cell;
	vertical-align: top;
	text-shadow: 1px 1px 1px #ffffff;
}

.point-new .limit-area p:last-child {
	font-size: 114%;
	display: table-cell;
	text-align: right;
	line-height: 1;
	font-weight: bold;
	color: #cc0000;
}



.point-new .lapse {
	margin: 8px 0 0;
	font-size: 86%;
	text-align: center;
	text-shadow: 1px 1px 1px #ffffff;
}

.point-new .link2 {
    padding: 0 15px;
}

.point-new .link3 {
    text-align: right;
    margin: 12px 0 0;
    padding: 12px 15px 0;
    text-shadow: 1px 1px 1px #ffffff;
    border-top: solid 2px #FFF;
}

.point-new .link3 a {
	background: url(/component/common/img/pc/top/arrow_link2.png) left center no-repeat;
	font-size: 86%;
	padding-left: 5px;
	text-decoration: none;
}

.point-new .link3 a:hover {
	text-decoration: underline;
}

.point-new .link-area {
	margin: 13px 0 0;
    padding: 0 15px;
	display: table;
}

.point-new .link-area li {
	display: table-cell;
	width: 62px;
	text-align: center;
}

.point-new .link-area li:nth-child(2) {
	padding: 0 7px;
}

.point-new .link-area li a {
	text-decoration: none;
}

.point-new .link-area li img {
	width: 62px;
}

.point-new .link-area li a span {
	font-size: 86%;
	display: inline-block;
	margin: 4px 0 0;
	text-shadow: 1px 1px 1px #ffffff;
}

.point-new .link-area li a:hover span {
	text-decoration: underline;
}

.login .btn,
.first .btn,
.point-new .btn {
	margin-top: 20px;
}

.login .btn a {
	background: #9c154f;
	text-shadow: 1px 1px 1px #83073c;
	border: solid 1px #9c154f;
}

.login .btn a:hover {
	background: #ffffff;
	text-shadow: 1px 1px 1px #ffffff;
	color: #9c154f;
}

.first .btn a {
	background: #a6c549;
	text-shadow: 1px 1px 1px #93b330;
	border: solid 1px #a6c549;
}

.first .btn a:hover {
	background: #ffffff;
	text-shadow: 1px 1px 1px #ffffff;
	color: #a6c549;
}

.point-new .btn a {
	background: #777777;
	text-shadow: 1px 1px 1px #636363;
}

.login .btn + p,
.first .btn + p {
	margin-top: 12px;
	text-shadow: 1px 1px 1px #ffffff;
}
/* ========================================
	サブコンテンツ:bnr/bnr2
======================================== */
.bnr,
.bnr2 {
	margin: 40px 0 0;
	padding: 0;
	width: 230px;
}

.bnr img,
.bnr2 img {
	border-radius: 3px;
	width: 230px;
	display: block;
}

.bnr2 + .bnr2 {
	margin: 27px 0 0;
}

.bnr a,
.bnr2 a {
	text-decoration: none;
	display: block;
}

.bnr2 a span.caption {
	display: block;
	margin: 12px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .bnr2 a span.caption {
	display: block;
	margin: 12px 0 0;
  }
}
.bnr2 a:hover span.caption {
	text-decoration: underline;
}
/* ========================================
	サブコンテンツ:campaign-box
======================================== */
.campaign-box .bnr2 a span.cpntag {
	display: inline-block;
	background: #333333;
	color: #ffffff;
	font-size: 87%;
	text-decoration: none;
	padding: 3px 10px;
	margin: 7px 0 0;
}

.campaign-box .bnr2 a span.cpntag + span.caption {
	margin: 7px 0 0;
}

.campaign-box .morebtn {
	margin: 13px 0 0;
}
/* ========================================
	サブコンテンツ:catalog-area
======================================== */
.catalog-area {
	margin: 40px 0 0;
}

.catalog-area ul {
	margin: 10px 0 0;
}

.catalog-area ul li~li {
	margin-top: 2px;
}

.catalog-area ul li a {
	display: block;
	background: #f7f6f4;
	text-decoration: none;
	font-size: 129%;
	padding: 13px 20px;
	position: relative;
	text-shadow: 1px 1px 1px #ffffff;
}

.catalog-area ul li a:hover {
	text-decoration: underline;
}

.catalog-area ul li:first-child a {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.catalog-area ul li:last-child a {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.catalog-area ul li a:after {
	content: "";
	display: block;
	position: absolute;
	background: url(/component/common/img/pc/top/arrow_catalog-area.png) right top no-repeat;
	width: 17px;
	height: 40px;
	top: 20px;
	right: 20px;
}

.catalog-area ul li a span {
	font-size: 78%;
	display: inline-block;
	line-height: 1.5;
	margin: 12px 0 0;
}

.catalog-area ul li a span > span {
	font-size: 100%;
	display: inline;
	font-weight: bold;
	color: #9c154f;
}
/* ========================================
	サブコンテンツ:news
======================================== */
.news {
	margin: 40px 0 0;
}

.news h2 {
	background: #f7f6f4;
	font-size: 129%;
	padding: 13px 20px;
	text-shadow: 1px 1px 1px #ffffff;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.news ul li {
	background: #f7f6f4;
	padding: 13px 20px;
	margin-top: 2px;
	text-shadow: 1px 1px 1px #ffffff;
}

.news ul li dd {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .news ul li dd {
	display: block;
  }
}

.news ul li a {
	text-decoration: underline;
}

.news ul li a:hover {
	text-decoration: none;
}

.news ul + div {
	background: #f7f6f4;
	padding: 13px 0;
	margin-top: 2px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.news .morebtn {
	padding: 0 20px;
}

.news .morebtn a {
	background: #777777;
	color: #ffffff;
}

.news .morebtn a:hover {
	background: #444444;
}
/* ========================================
	サブコンテンツ:word-ranking
======================================== */
.word-ranking {
	margin: 40px 0 0;
}

.word-ranking h2 {
	background: #f7f6f4;
	font-size: 129%;
	padding: 13px 20px;
	text-shadow: 1px 1px 1px #ffffff;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.word-ranking ul {
	background: #f7f6f4;
	padding: 13px 20px;
	margin-top: 2px;
}

.word-ranking ul li {
	display: inline-block;
	margin: 0 10px 10px 0;
}

.word-ranking ul li a {
	background: #ffffff;
	border: solid 1px #dddddd;
	color: #000000;
	padding: 0 8px;
	display: inline-block;
	border-radius: 50px;
	text-align: center;
	line-height: 22px;
	text-decoration: none;
}

.word-ranking ul li a:hover {
	text-decoration: underline;
}

.word-ranking ul + div {
	background: #f7f6f4;
	margin: -10px 0 0;
	padding: 0 0 20px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.word-ranking .morebtn {
	padding: 0 20px;
}

.word-ranking .morebtn a {
	background: #777777;
	color: #ffffff;
}

.word-ranking .morebtn a:hover {
	background: #444444;
}
/* ========================================
	サブコンテンツ:information
======================================== */
.information {
	margin: 40px 0 0;
}

.information h2 {
	background: #f7f6f4;
	font-size: 129%;
	padding: 13px 20px;
	text-shadow: 1px 1px 1px #ffffff;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.information ul li {
	background: #f7f6f4;
	padding: 13px 20px;
	margin-top: 2px;
	text-shadow: 1px 1px 1px #ffffff;
}

.information ul li a {
	text-decoration: none;
	position: relative;
}

.information ul li a:hover {
	text-decoration: underline;
}

.information ul li a.pdf:after {
	position: absolute;
	display: inline-block;
	content: "";
	background: url(/component/common/img/pc/top/icon_information_pdf.png) right center no-repeat;
	width: 15px;
	height: 15px;
	right: -25px;
	bottom: 5px;
}

.information ul li:last-child {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}
/* ========================================
	メインコンテンツ：shop-box
======================================== */
.shop-box {
	width: 100%;
	margin: 60px 0 0;
	padding: 20px 0 50px;
	background: #f7f6f4;
}

.shop-box h2 {
	font-size: 171%;
	text-align: center;
	text-shadow: 1px 1px 1px #ffffff;
}

.shop-box ul {
	margin: 20px 0 0;
}

html:not(.enablejs) .shop-box ul {
	margin: 20px auto 0;
	width: 1240px;

}

html:not(.enablejs) .shop-box ul:after {
	content:"";
	display: block;
	clear: both;
}

.shop-box ul li {
	width: 230px !important;
	height: 304px;
	margin-right: 22px;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .shop-box ul li {
  	height: auto;
  }
}

html:not(.enablejs) .shop-box ul li {
	float: left;
	width: 230px;
}

html:not(.enablejs) .shop-box ul li:nth-child(5n) {
	margin-right: 0;
}

@media screen and (max-width: 1280px) {
	html:not(.enablejs) .shop-box ul {
		margin: 20px auto 0;
		width: 980px;
	}

	html:not(.enablejs) .shop-box ul li:nth-child(5n) {
		margin-right: 20px;
	}

	html:not(.enablejs) .shop-box ul li:nth-child(4n) {
		margin-right: 0;
	}
}

.shop-box ul li a {
	text-decoration: none;
	display: block;
}

.shop-box ul li a span {
	display: inline-block;
	margin: 10px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .shop-box ul li a span {
	display: inline-block;
	margin: 10px 0 0;
  }
}

.shop-box ul li a img {
	border-radius: 3px;
	width: 230px;
}

.shop-box ul li a:hover span {
	text-decoration: underline;
}

html.enablejs .shop-box .sliderwrap {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
}

html.enablejs .shop-box .bx-wrapper {
	width: 1240px;
	max-width: 1240px !important;
	margin: 0 auto;
}

html.enablejs .shop-box .bx-viewport {
	margin: 0 auto;
	width: 1240px;
	position: relative;
}

html:not(.enablejs) .custom-control {
	display: none;
}

@media screen and (max-width: 1280px) {
	html.enablejs .shop-box .sliderwrap {
		max-width: 980px;
	}

	html.enablejs .shop-box .bx-wrapper {
		width: 980px;
		max-width: 980px !important;
	}

	html.enablejs .shop-box .bx-viewport {
		width: 980px;
	}
}

html.enablejs .shop-box .btn-prev {
	position: absolute;
	top: 85px;
	left: -10px;
}

html.enablejs .shop-box .btn-next {
	position: absolute;
	top: 85px;
	right: -10px;
}

html.enablejs .shop-box .bx-prev,
html.enablejs .shop-box .bx-next {
	width: 100%;
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 100;
}
/* ========================================
	メインコンテンツ：digicata-box
======================================== */
.digicata-box {
	width: 100%;
	margin: 0;
	padding: 20px 0 50px;
	background: #efede8;
}

.digicata-box h2 {
	font-size: 171%;
	text-align: center;
	text-shadow: 1px 1px 1px #ffffff;
}

.digicata-box ul {
	width: 1230px;
	margin: -10px auto 0;
}

@media screen and (max-width: 1280px) {
	.digicata-box ul {
		width: 980px;
	}
}

.digicata-box ul:after {
	content: "";
	display: block;
	clear: both;
}

.digicata-box ul li {
	width: 230px;
	float: left;
	margin: 40px 0 0 20px;
	position: relative;
}

@media screen and (max-width: 1280px) {
	.digicata-box ul li {
		width: 230px;
	}
}

.digicata-box ul li:nth-child(5n+1) {
	clear: both;
	margin: 40px 0 0;
}

@media screen and (max-width: 1280px) {
	.digicata-box ul li:nth-child(5n+1) {
		clear: none;
		margin: 40px 0 0 20px;
	}

	.digicata-box ul li:nth-child(4n+1) {
		clear: both;
		margin: 40px 0 0;
	}
}

.digicata-box ul li img {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	cursor: pointer;
	width: 230px;
	height: auto;
}

.digicata-box ul li a {
	display: block;
	background: #ffffff;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	text-align: center;
	font-size: 114%;
	padding: 13px 0;
	text-decoration: none;
}

.digicata-box ul li a:hover {
	text-decoration: underline;
}

.digicata-box ul li .caption {
	position: absolute;
	background: rgba(0, 0, 0, 0.7);
	top: 0;
	z-index: 1;
	opacity: 0;
	width: 230px;
	height: 325px;
	text-shadow: 1px 1px 1px #000000;
	cursor: pointer;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.digicata-box ul li .caption .lead {
	padding: 13px 20px;
	color: #ffffff;
}

.digicata-box ul li .caption .btn {
	width: 190px;
	height: 36px;
	margin: 0 auto;
}

.digicata-box ul li .caption .btn a {
	background: none;
	border: solid 2px #ffffff;
	color: #ffffff;
	display: block;
	border-radius: 50px;
	text-align: center;
	line-height: 36px;
	text-decoration: none;
	padding: 0;
	margin: 0;
	font-size: 86%;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}

.digicata-box ul li .caption .btn a:hover {
	text-decoration: none;
	background: #ffffff;
	color: #444444;
	text-shadow: 1px 1px 1px #ffffff;
}

.digicata-box ul li .caption .btn.digicata {
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.digicata-box ul li .caption .btn.shop {
	position: absolute;
	bottom: 66px;
	left: 20px;
}

.digicata-box .morebtn {
	margin-top: 40px;
}

.digicata-box .morebtn a {
	background: #777777;
	color: #ffffff;
}

.digicata-box .morebtn a:hover {
	background: #444444;
}
/* ========================================
	メインコンテンツ：affiliate-link
======================================== */
.affiliate-link {
	width: 100%;
	background: #efede8;
	padding: 30px 0;
}

.affiliate-link ul {
	margin: 0;
}

html:not(.enablejs) .affiliate-link ul {
	margin: 0 auto;
	width: 1240px;
}

html:not(.enablejs) .affiliate-link ul:after {
	content:"";
	display: block;
	clear: both;
}

@media screen and (max-width: 1280px) {
	html:not(.enablejs) .affiliate-link ul {
		width: 980px;
	}
}


.affiliate-link ul li {
	width: 230px !important;
	height: 304px;
	margin-right: 22px;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .affiliate-link ul li {
  	height: auto;
  }
}

html:not(.enablejs) .affiliate-link ul li {
	float: left;
	width: 230px;
}

html:not(.enablejs) .affiliate-link ul li:nth-child(5n) {
	margin-right: 0;
}

@media screen and (max-width: 1280px) {
	html:not(.enablejs) .affiliate-link ul li:nth-child(5n) {
		margin-right: 20px;
	}

	html:not(.enablejs) .affiliate-link ul li:nth-child(4n) {
		margin-right: 0;
	}
}

.affiliate-link ul li a img {
	border-radius: 3px;
	width: 230px;
}

.affiliate-link ul li a {
	text-decoration: none;
	display: block;
}

.affiliate-link ul li a span {
	display: inline-block;
	margin: 10px 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .affiliate-link ul li a span {
	display: inline-block;
	margin: 10px 0 0;
  }
}

.affiliate-link ul li a:hover span {
	text-decoration: underline;
}

html.enablejs .affiliate-link .sliderwrap {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
}

html.enablejs .affiliate-link .bx-wrapper {
	width: 1240px;
	max-width: 1240px !important;
	margin: 0 auto;
}

html.enablejs .affiliate-link .bx-viewport {
	margin: 0 auto;
	width: 1240px;
	position: relative;
}

html:not(.enablejs) .custom-control {
	display: none;
}

@media screen and (max-width: 1280px) {
	html.enablejs .affiliate-link .sliderwrap {
		max-width: 980px;
	}

	html.enablejs .affiliate-link .bx-wrapper {
		width: 980px;
		max-width: 980px !important;
	}

	html.enablejs .affiliate-link .bx-viewport {
		width: 980px;
	}
}

html.enablejs .affiliate-link .btn-prev3 {
	position: absolute;
	top: 65px;
	left: -10px;
}

html.enablejs .affiliate-link .btn-next3 {
	position: absolute;
	top: 65px;
	right: -10px;
}

html.enablejs .affiliate-link .bx-prev,
html.enablejs .affiliate-link .bx-next {
	width: 100%;
	display: block;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 100;
}