@charset 'utf-8';

/*==============================
All Device Style
==============================*/

/* Common
------------------------------*/
.p-contents {
	line-height: 1;
	font-size: 10px;
}
.p-contents__section {
	margin: 18px 0;
	padding: 24px 0;
}
.p-contents__section--colored {
	background-color: #f2efe6;
	padding: 48px 0;
}
.p-contents__section__hl {
	margin-bottom: 35px;
	padding: 0 10px;
	line-height: 1;
	color: #707070;
	text-align: center;
	font-size: 2em;
}
.p-contents__section--small {
	margin: -12px 0 35px;
}
.p-contents__section--small__hl {
	margin-bottom: 12px;
	padding: 0 10px;
	line-height: 1;
	color: #707070;
	text-align: center;
	font-size: 1.6em;
}
#js-container-tru-dailyitem .p-contents__section,
#js-container-bru-dailyitem .p-contents__section {
	margin:0;
}

/* Only Category Page
------------------------------*/
.p-dispcat {
	overflow: hidden;
}
.p-dispcat__hl {
	margin-bottom: 16px;
	line-height: 1.5;
	font-size: 1.8em;
	font-weight: bold;
}
.p-dispcat__description {
	margin-bottom: 16px;
	line-height: 1.5;
	font-size: 1.2em;
}

/* Carousel
------------------------------*/
.p-carousellist {
	position: relative;
	overflow: hidden;
}
.p-carousellist .slick-list,
.p-carousellist .slick-track {
	z-index: 2;
}
.p-carousellist::before {
	content: "Loading...";
	margin: auto;
	width: 100px;
	height: 100px;
	line-height: 100px;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	color: #ddd;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
}
@keyframes loading {
	0% {
		transform: rotate(0deg);
		border-width: 4px;
	}
	50% {
		border-width: 8px;
	}
	100% {
		transform: rotate(360deg);
		border-width: 4px;
	}
}
.p-carousellist::after {
	content: "";
	margin: auto;
	border-style: dotted;
	border-color: #ddd;
	border-radius: 50%;
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	line-height: 100px;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	text-align: center;
	animation: 2s linear 1s infinite normal forwards running loading;
}
.p-carousellist__item {
	opacity: 0;
	background-color: #fff;
}
.p-carousellist__item__anchor {
	display: block;
}
.p-carousellist__item__img {
	width: 100%;
}
.p-carousellist__dots {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	opacity: 0;
}
.p-carousellist__dots li {
	margin: 0 5px;
}
.p-carousellist__dots button {
	border: none;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	background-color: #ddd;
	overflow: hidden;
	text-indent: -3em;
	cursor: pointer;
	outline: none;
}
.p-carousellist__dots .slick-active button {
	background-color: #b1d0f9;
}

/* Category List
------------------------------*/
.p-categorylist {
	margin: 0 -2px;
	display: flex;
	flex-wrap: wrap;
}
.p-categorylist__item {
	margin: 0 2px 5px;
}
.p-categorylist__item--tru {
	background-color: #dcecfe;
}
.p-categorylist__item--bru {
	background-color: #f1eaf5;
}
.p-categorylist__item__anchor {
	box-sizing: border-box;
	display: flex;
}
.p-categorylist__item__fig {
	width: 60px;
	height: 60px;
}
.p-categorylist__item__fig__img {
	width: 100%;
}
.p-categorylist__item__text {
	line-height: 1.5;
	flex: 1;
}

/* Flag List
------------------------------*/
.p-flaglist {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.p-flaglist__item {
	margin: 0 18px;
	text-align: center;
}
.p-flaglist__item__anchor {
	height: 100%;
	display: inline-flex;
	align-items: center;
}
.p-flaglist__item__fig {
	margin-right: 6px;
}
.p-flaglist__item__text {
	font-size: 1.2em;
}

/* Age List
------------------------------*/
.p-agelist {
	display: flex;
	flex-wrap: wrap;
}
.p-agelist__item {
	margin: 0 5px 10px;
	text-align: center;
}
.p-agelist__item__anchor {
	padding: 10px 0;
	display: block;
	color: #fff !important;
	text-align: center;
	font-size: 1.4em;
}
.p-agelist__item__anchor--purple {
	background-color: #674888;
}
.p-agelist__item__anchor--red {
	background-color: #e5004f;
}
.p-agelist__item__anchor--blue {
	background-color: #0054a7;
}
.p-agelist__item__anchor--green {
	background-color: #6fba2c;
}

/* Toy List
------------------------------*/
.p-toylist {
	display: flex;
	flex-wrap: wrap;
}
.p-toylist__item {
	margin: 0 5px 10px;
	text-align: center;
}
.p-toylist__item__anchor {
	display: block;
	position: relative;
}
.p-toylist__item__fig__img {
	width: 100%;
}
.p-toylist__item__text {
	margin: auto 0;
	padding-left: 40%;
	box-sizing: border-box;
	width: 100%;
	height: 1em;
	line-height: 1;
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	color: #333 !important;
	font-size: 1.4em;
}

/* Character List & Brand List
------------------------------*/
.p-characterlist,
.p-brandlist {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	overflow-y: hidden;
}
.p-characterlist.is-open,
.p-brandlist.is-open {
	max-height: inherit;
}
.p-characterlist.is-open::after,
.p-brandlist.is-open::after {
	content: none;
}
.p-characterlist__item,
.p-brandlist__item {
}
.p-characterlist__item__anchor,
.p-brandlist__item__anchor {
	display: block;
}
.p-characterlist__item__fig,
.p-brandlist__item__fig {
	margin-bottom: 6px;
	padding: 6px;
	display: block;
	background-color: #fff;
	text-align: center;
}
.p-characterlist__item__fig__img,
.p-brandlist__item__fig__img {
	max-width: 100%;
}
.p-characterlist__item__text,
.p-brandlist__item__text {
	line-height: 1.5;
	display: block;
	text-align: center;
	font-size: 1.2em;
}

/* Banner List
------------------------------*/
.p-bnrlist {
	display: flex;
	flex-wrap: wrap;
}
.p-bnrlist--oneline {
	justify-content: center;
}
.p-bnrlist__item {
	position: relative;
}
.p-bnrlist__item.js-bnrlist-item {
	display: none;
}
.p-bnrlist__item__anchor {
	display: block;
	text-align: center;
}
.p-bnrlist__item__bnr {
	display: block;
}
.p-bnrlist__item__bnr__img {
	width: 100%;
	max-width: auto;
}
.p-bnrlist__item__text {
	margin-top: 6px;
	line-height: 1.5;
	display: block;
	font-size: 1.2em;
}
.p-bnrlist__item__text--left {
	text-align: left;
}
.p-bnrlist__item--movie::before {
	content: "";
	padding-top: 100%;
	display: block;
}
.p-bnrlist__item__iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* Link List
------------------------------*/
.p-linklist {
	display: flex;
	flex-wrap: wrap;
}
.p-linklist--oneline {
	justify-content: center;
}
.p-linklist__item__anchor {
	padding: 1em;
	display: block;
	color: #717171 !important;
	background-color: #fff;
	text-align: center;
	font-size: 1.2em;
}
.p-linklist__item__anchor_sp {
	padding: 2em;
	display: block;
	color: #717171 !important;
	background-color: #fff;
	text-align: center;
	font-size: 1.2em;
}
.p-linklist__item__anchor__icon {
	margin-right: .35em;
	width: 2em;
	height: 2em;
	color: #000;
	vertical-align: middle;
	font-size: 2em;
	font-style: normal;
	font-weight: bold;
}
/* 002070 男女別アイコン */
.p-linklist__item__anchor__icon--boygirl {
	display: inline-block;
	height: 1.6em;
	width: 1.6em;
	line-height: 1;
	font-size: 2em;
	vertical-align: middle;
}
.p-linklist__item__anchor__icon--boygirl img {
	max-width: 100%;
	height: auto;
}
.p-linklist__item__anchor__svg {
	margin-right: .35em;
	vertical-align: middle;
}

/* Accordion
------------------------------*/
.p-accordionlist {
	position: relative;
	overflow: hidden;
}
.p-accordionlist::after {
	content: "";
	width: 100%;
	height: 60px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
.p-contents__section--colored .p-accordionlist::after {
	content: "";
	width: 100%;
	height: 60px;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	background: -moz-linear-gradient(top,  rgba(242,239,230,0) 0%, rgba(242,239,230,1) 80%, rgba(242,239,230,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(242,239,230,0) 0%,rgba(242,239,230,1) 80%,rgba(242,239,230,1) 100%);
	background: linear-gradient(to bottom,  rgba(242,239,230,0) 0%,rgba(242,239,230,1) 80%,rgba(242,239,230,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f2efe6', endColorstr='#f2efe6',GradientType=0 );
}
.p-accordionlist.is-open {
	height: auto !important;
}
.p-accordionlist.is-open::after {
	content: none;
}
.p-more {
	margin-top: 32px;
	padding: 0 10px;
}
.p-more__btn {
	margin: 0 auto;
	padding: 1em 3em;
	border: 1px solid #999;
	border-radius: calc(1.5em + 1px);
	box-sizing: border-box;
	width: 212px;
	line-height: 1;
	display: block;
	position: relative;
	color: #333 !important;
	background-color: #fff;
	text-align: center;
	font-size: 1.2em;
}
.p-more__btn::after {
	content: "";
	margin: auto 0;
	border-width: 1px 1px 0 0;
	border-style: solid;
	border-color: #999;
	box-sizing: border-box;
	width: 1em;
	height: 1em;
	display: block;
	position: absolute;
	top: 0;
	right: 1em;
	bottom: 0;
	transform: rotate(45deg);
}
.p-more__btn--accordion::after {
	top: -.7em;
	transform: rotate(135deg);
}
.p-more__btn--accordion.is-open::after {
	top: 0;
	bottom: -.7em;
	transform: rotate(315deg);
}

/* Chrismas2020
------------------------------*/

#christmas-wrap {
	background: linear-gradient(218deg, #ac0e0e, #b81013, #c41118, #d0131d, #dc1422, #e42122, #eb2c22, #f33522, #f7461c, #fa5515, #fd620c, #ff6f00);
}
#christmas-wrap .p-contents__section__hl {
	margin: 35px 0;
	color: #fff;
}
.background-fill {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.background-fill .js-item {
	margin: 0 5px 10px;
	width: calc(99% / 3 - 10px);
	background-color: #fff;
}
.background-fill p.photo-item {
	padding: 2em;
}
.background-fill p.photo-item img {
	width: 100%;
}
.background-fill .wrapper-item {
	padding: 1em;
}
.background-fill .name-item {
	margin: 0 1.5em;
	line-height: 1.4em;
	font-size: 1em;
	font-weight: normal;
}
.background-fill .price-item {
	margin: 1em 0 2em 0;
	line-height: 1.5;
	text-align: center;
	word-break: normal;
	font-size: 1.2em;
}
.background-fill .price-item .extax-item {
	margin: 0 .5em;
	display: inline-block;
	position: relative;
}
.background-fill .price-item .extax-item::after {
	content: "";
	margin: auto 0;
	width: 100%;
	height: 1px;
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background-color: #3b2e1d;
}
.background-fill .price-item .intax-item {
	margin: 0 .5em;
	display: inline-block;
	color: #ff0000;
}
.background-fill .price-item .extax-item span,
.background-fill .price-item .intax-item span {
	font-size: .8em;
}
.wrapper-item {
	position: relative;
}
.discount-icon-item {
	border: 2px solid #ff0000;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff inset;
	box-sizing: border-box;
	width: 4em;
	height: 4em;
	line-height: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -6px;
	left: -6px;
	z-index: 1;
	background-color: #ff0000;
}
.upper-text-discount-icon-item {
	display: block;
	color: #fff !important;
	text-align: center;
	font-size: .7em;
	font-weight: bold;
}
.main-text-discount-icon-item {
	text-shadow:
		2px 2px 0 #ff0000,
		0 2px 0 #ff0000,
		-2px 2px 0 #ff0000,
		-2px 0 0 #ff0000,
		-2px -2px 0 #ff0000,
		0 -2px 0 #ff0000,
		2px -2px 0 #ff0000,
		2px 0 0 #ff0000;
	display: block;
	color: #fff !important;
	white-space: nowrap;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}
.lower-text-discount-icon-item {
	display: block;
	color: #fff !important;
	text-align: center;
	font-size: .85em;
	font-weight: bold;
}
.label-icon-item {
	display: inline-block;
	position: absolute;
	top: 10px;
	left: -.6em;
	z-index: 1;
}
.label-icon-item::after {
	content: "";
	border-style: solid;
	border-width: 0 .6em .6em 0;
	border-color: transparent #7f0000 transparent transparent;
	width: 0;
	height: 0;
	display: inline-block;
	position: absolute;
	bottom: -.6em;
	left: 0;
}
.text-label-icon-item {
	padding: 0 .6em;
	height: 2em;
	line-height: 2em;
	display: inline-block;
	position: relative;
	color: #fff !important;
	font-size: 1em;
	font-weight: bold;
}
.text-label-icon-item::before {
	content: "";
	border-style: solid;
	border-width: 1em 1em 0 0;
	border-color: transparent;
	width: 0;
	height: 0;
	display: inline-block;
	position: absolute;
	top: 0;
	right: -1em;
}
.text-label-icon-item::after {
	content: "";
	border-style: solid;
	border-width: 1em 0 0 1em;
	border-color: transparent;
	width: 0;
	height: 0;
	display: inline-block;
	position: absolute;
	bottom: 0;
	right: -1em;
}
.text-hotprice-icon-item {
	background-color: #ff0000;
}
.text-hotprice-icon-item::before {
	border-top-color: #ff0000;
}
.text-hotprice-icon-item::after {
	border-left-color: #ff0000;
}
.text-new-icon-item {
	background-color: #66bc29;
}
.text-new-icon-item::before {
	border-top-color: #66bc29;
}
.text-new-icon-item::after {
	border-left-color: #66bc29;
}


/*==============================
Only PC Style
==============================*/

@media screen and (min-width: 768px) {

/* Common
------------------------------*/
	.p-contents a:hover {
		opacity: .7;
	}
	.p-contents__halflist {
		margin: 0 -19px;
		display: flex;
		flex-wrap: wrap;
	}
	.p-contents__halflist__item {
		margin-right: 19px;
		margin-bottom: 0;
		margin-left: 19px;
		box-sizing: border-box;
		width: calc(50% - 38px);
	}

/* Carousel
------------------------------*/
	.p-carousel {
		height: 585px;
	}
	.p-carousellist {
		height: 547px;
	}
	.p-categorylist__item {
		width: calc(25% - 4px);
	}

/* Category List
------------------------------*/
	.p-categorylist__item__anchor {
		padding: 10px;
	}
	.p-categorylist__item__fig {
		margin-right: 10px;
	}
	.p-categorylist__item__text {
		font-size: 1.5em;
		font-weight:bold;
	}

/* Age List
------------------------------*/
	.p-agelist {
		margin: 0 15px;
	}
	.p-agelist__item {
		width: calc(25% - 10px);
	}

/* Toy List
------------------------------*/
	.p-toylist {
		margin: 0 15px;
	}
	.p-toylist__item {
		width: calc(33.33% - 10px);
	}

/* Character List & Brand List
------------------------------*/
	.p-characterlist,
	.p-brandlist {
		margin: 0 15px;
	}
	.p-characterlist__item,
	.p-brandlist__item {
		margin: 0 5px 10px;
		width: calc(14.28% - 10px);
	}

/* Banner List
------------------------------*/
	.p-bnrlist {
		margin: 0 10px;
	}
	.p-bnrlist__item {
		margin: 0 10px 20px;
		width: calc(20% - 20px);
	}
	.p-bnrlist__item--wide {
		width: calc(100% - 10px);
	}

/* Link List
------------------------------*/
	.p-linklist {
		margin: 0 10px;
	}
	.p-linklist__item {
		margin: 0 10px 20px;
		width: calc(25% - 20px);
	}
	.p-linklist__item--wide {
		width: calc(50% - 20px);
	}

/* Accordion
------------------------------*/
	.p-accordionlist {
		min-height: 267px;
	}
	.p-characterlist.p-accordionlist,
	.p-brandlist.p-accordionlist {
		min-height: 200px;
	}

/* Chrismas2020
------------------------------*/
	#christmas-wrap {
		padding: 48px 50px 20px;
	}
	.discount-icon-item {
		font-size: 2em;
	}
	.label-icon-item {
		font-size: 1.4em;
	}
}
/*==============================
Only Smartphone Style
==============================*/

@media screen and (max-width: 767px) {

/* Common
------------------------------*/
	.p-dispcat__hl {
		padding: 0 10px;
	}
	.p-dispcat__description {
		padding: 0 10px;
	}
	#js-container-tru-dailyitem .p-contents__section,
	#js-container-bru-dailyitem .p-contents__section {
		margin: 0;
	}

/* Carousel
------------------------------*/
	.p-carousel {
		height: calc(100vw + 38px);
	}
	.p-carousellist {
		height: 100vw;
	}
	.p-dispcat .p-carousel {
		height: calc(100vw * 547 / 972 + 38px);
	}
	.p-dispcat .p-carousellist {
		height: calc(100vw * 547 / 972);
	}
	.p-dispcat .p-carousellist__dots button:nth-of-type(2) {
		display: none;
	}

/* Category List
------------------------------*/
	.p-categorylist__item {
		width: calc(50% - 4px);
	}
	.p-categorylist__item__anchor {
		padding: 6px;
	}
	.p-categorylist__item__fig {
		margin-right: 6px;
	}
	.p-categorylist__item__text {
		font-size: 1.3em;
	}

/* Flag List
------------------------------*/
	.p-flaglist {
		display: flex;
		flex-wrap: wrap;
	}
	.p-flaglist__item {
		margin: 0 5px 18px;
		width: calc(50% - 10px);
	}

/* Age List
------------------------------*/
	.p-agelist {
		margin: 0 3px;
	}
	.p-agelist__item {
		width: calc(50% - 10px);
	}

/* Toy List
------------------------------*/
	.p-toylist {
		margin: 0 3px;
	}
	.p-toylist__item {
		width: calc(100% - 10px);
	}

/* Character List & Brand List
------------------------------*/
	.p-characterlist,
	.p-brandlist {
		margin: 0 2px;
	}
	.p-characterlist__item,
	.p-brandlist__item {
		margin: 0 2px 4px;
		width: calc(50% - 4px);
	}

/* Banner List
------------------------------*/
	.p-bnrlist__item {
		margin: 0 8px 8px;
		width: calc(50% - 16px);
	}
	.p-bnrlist__item--wide {
		width: calc(100% - 16px);
	}

/* Link List
------------------------------*/
	.p-linklist__item {
		border-width: 0 0 1px;
		border-style: solid;
		border-color: #a1a09d;
		width: calc(50% - .5px);
	}
	.p-linklist__item:first-of-type,
	.p-linklist__item:nth-of-type(2) {
		border-top-width: 1px;
	}
	.p-linklist__item:nth-of-type(2n+1) {
		border-right-width: 1px;
	}
	.p-linklist__item--wide {
		width: 100%;
	}
	.p-linklist__item--wide:nth-of-type(2) {
		border-top-width: 0;
	}
	.p-linklist__item--wide:nth-of-type(2n+1) {
		border-right-width: 0;
	}

/* Accordion
------------------------------*/
	.p-accordionlist {
		min-height: calc(1.05625vw + 60px);
	}

/* Chrismas2020
------------------------------*/
	#christmas-wrap {
		padding: 0 5px;
	}
	.background-fill .js-item {
		width: calc(50% - 10px); 
		background-color: #fff;
	}
	#christmas-wrap .p-contents__section__hl {
		padding-top: 1.8em;
	}
	.background-fill p.photo-item img {
		width: 100%;
	}
	.background-fill .wrapper-item {
		padding: 1em;
	}
	.background-fill .name-item {
		margin: 0 1.5em;
		line-height: 1.4em;
	}
	.background-fill .price-item {
		text-align: center;
		margin: 1em 0 2em 0;
		font-size: 1.5em;
	}
	.discount-icon-item {
		font-size: 1.4em;
	}
	.label-icon-item {
		font-size: 1em;
	}
}