@charset "utf-8";

#contents {
	position: relative;
	padding-top: 12px;
}

div.outline {
	box-sizing: border-box;
	margin-bottom: 20px;
	width: 830px;
	border-right: 1px solid #DEDEDE;
	border-bottom: 1px solid #DEDEDE;
	border-left: 1px solid #DEDEDE;
}

/*ヘッダー*/
.mixerHeaderArea.title {
	position: relative;
	width: 830px;
	height: 50px;
	border-bottom: solid 5px #BCC3C4;
	border-radius: 3px 3px 0 0;
	background: #ABB5B8;
}

.mixerHeaderArea.title h1 {
	overflow: hidden;
	overflow: hidden;
	height: 48px;
	text-indent: 100%;
	text-indent: 100%;
	white-space: nowrap;
	white-space: nowrap;
}

.mixerHeaderArea.title h1.no01 {
	background: url("/image/shop/premium/mixer/p_mixer.png") no-repeat 20px 10px;
}

.mixerHeaderArea.title h1.no25 {
	background: url("/image/shop/premium/mixer/p_mixer25.png") no-repeat 20px 10px;
}

.toggle_button {
	position: absolute;
	top: 9px;
	right: 260px;
}

.toggle_button a {
	display: block;
	width: 208px;
	height: 33px;
	background-size: 100% 100%;
}

.toggle_button a.garden {
	background: url("/image/shop/premium/mixer/toggle1.png") no-repeat center center;
}

.toggle_button a.nicoly {
	background: url("/image/shop/premium/mixer/toggle2.png") no-repeat center center;
}

.mixerHeaderArea .c_coin {
	position: absolute;
	top: 10px;
	left: 582px;
	padding: 0 10px;
	width: 214px;
	height: 26px;
	border: #D2D0C6 solid 2px;
	border-radius: 3px;
	background: url("/image/shop/common/title_coin.gif") 5px 5px no-repeat #FFF;
	color: #777;
	text-align: right;
	font-size: 80%;
	line-height: 25px;
}

.tit_mixer {
	margin: 0 0 8px 15px;
	color: #A9A66A;
	font-size: 18px;
}

.tit_mixer::before {
	content: "■";
}

/* 通常素材・メガ素材・全て */
.selectbox {
	position: relative;
	margin-right: 222px;
}

.selectbox::before,
.selectbox::after {
	position: absolute;
	content: "";
	pointer-events: none;
}

.selectbox::before {
	top: -4px;
	right: 0;
	display: inline-block;
	width: 23px;
	height: 25px;
	border-radius: 0 5px 5px 0;
	background-color: #AAA495;
	content: "";
}

.selectbox::after {
	position: absolute;
	top: 6px;
	right: 7px;
	width: 0;
	height: 0;
	border-width: 6px 4px 0 4px;
	border-style: solid;
	border-color: #FFF transparent transparent transparent;
	pointer-events: none;
}

.selectbox select {
	margin-top: 2px;
	padding: 3px 8px;
	min-width: 150px;
	height: 25px;
	border: 2px solid #B9B4A8;
	border-radius: 5px;
	color: #777;
	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.selectbox select:focus {
	outline: 1px solid #AAA495;
}

/* 検索ボタン */
.searchBtn {
	display: flex;
	margin: 0;
}

.searchBtn.firstBtn {
	position: absolute;
	top: 10px;
	right: 0;
	width: 650px;
}

.searchBtn.firstBtn p {
	margin-left: 12px;
}

.searchBtn .btn_search a,
.searchBtn .btn_reset a,
.mode_search .js-modal-close,
.mode_sort .js-modal-close {
	padding: 2px 0;
	width: 120px;
	font-size: 14px;
}

.searchBtn .btn_search a {
	background: url(/image/shop/premium/mixer/ico_search.svg) #F8F5ED no-repeat 20px 5px;
	background-size: 17px;
	text-indent: 25px;
	letter-spacing: 1em;
}

.searchBtn .btn_radius_gray span {
	display: block;
	box-sizing: border-box;
	padding: 2px 0;
	width: 120px;
	border: #D3CCBD solid 2px;
	border-radius: 16px;
	background-color: #D3CCBD;
	box-shadow: none;
	color: #FFF;
	text-align: center;
	font-size: 14px;
}

.searchBtn .btn_sort a {
	vertical-align: -4px;
}

/*タブ*/
.nav_mixer {
	position: relative;
	height: 30px;
}

.nav_mixer ul {
	position: absolute;
	bottom: -2px;
	z-index: 100;
	display: flex;
	margin-left: 10px;
	width: 800px;
}

.nav_mixer ul li {
	display: block;
	margin-left: 8px;
	width: 93px;
}

.nav_mixer ul li a {
	display: block;
	width: 93px;
	height: 29px;
	background-repeat: no-repeat;
	font-size: 0;
}

.nav_mixer ul li a {
	background-image: url(/image/shop/premium/mixer/n2_tab1.png);
}

.nav_mixer ul li.kisekae a {
	background-image: url(/image/shop/premium/mixer/n2_tab2.png);
}

.nav_mixer ul li.kagu a {
	background-image: url(/image/shop/premium/mixer/n2_tab3.png);
}

.nav_mixer ul li.gaikan a {
	background-image: url(/image/shop/premium/mixer/n2_tab4.png);
}

.nav_mixer ul li.naya a {
	background-image: url(/image/shop/premium/mixer/n2_tab5.png);
}

.nav_mixer ul li.oniwa a {
	background-image: url(/image/shop/premium/mixer/n2_tab6.png);
}

.nav_mixer ul li.haikei a {
	background-image: url(/image/shop/premium/mixer/n2_tab7.png);
}

.nav_mixer ul li a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab1_on.png);
}

.nav_mixer ul li.kagu a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab3_on.png);
}

.nav_mixer ul li.kisekae a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab2_on.png);
}

.nav_mixer ul li.gaikan a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab4_on.png);
}

.nav_mixer ul li.naya a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab5_on.png);
}

.nav_mixer ul li.oniwa a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab6_on.png);
}

.nav_mixer ul li.haikei a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab7_on.png);
}

.nav_mixer ul li.select a,
.nav_mixer ul li.select a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab1_select.png);
}

.nav_mixer ul li.kisekae.select a,
.nav_mixer ul li.kisekae.select a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab2_select.png);
}

.nav_mixer ul li.kagu.select a,
.nav_mixer ul li.kagu.select a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab3_select.png);
}

.nav_mixer ul li.gaikan.select a,
.nav_mixer ul li.gaikan.select a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab4_select.png);
}

.nav_mixer ul li.naya.select a,
.nav_mixer ul li.naya.select a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab5_select.png);
}

.nav_mixer ul li.oniwa.select a,
.nav_mixer ul li.oniwa.select a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab6_select.png);
}

.nav_mixer ul li.haikei.select a,
.nav_mixer ul li.haikei.select a:hover {
	background-image: url(/image/shop/premium/mixer/n2_tab7_select.png);
}

/* search */
.nav_mixer ul li.search a {
	background-image: url(/image/shop/premium/mixer/tab_search.png);
}

.nav_mixer ul li.search a:hover {
	background-image: url(/image/shop/premium/mixer/tab_search_on.png);
}

.nav_mixer ul li.search.select a,
.nav_mixer ul li.search.select a:hover {
	background-image: url(/image/shop/premium/mixer/tab_search_select.png);
}

/*合成レシピ一覧*/
.mixerListArea {
	position: relative;
	display: flex;
	margin: 0 13px 13px 13px;
	padding: 20px 0;
	height: 528px;
	border: #B2A663 solid 2px;
	border-radius: 8px;
}

.noLogin {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 15px;
	width: 368px;
	height: 482px;
	border: #E9F5D9 dashed 2px;
	border-radius: 15px;
}

.noLogin p.txt_noLogin {
	color: #D39832;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}

.noLogin .btn_radius_gray a {
	display: block;
	margin: 0 auto;
}

.itemList {
	margin: 0 0 20px 15px;
	width: 368px;
	height: 484px;
}

.itemList img[src="/image/loadingAnimation.gif"] {
	position: absolute;
	top: 260px;
	left: 95px;
	width: 208px;
}

.itemList .noResults {
	padding-top: 240px;
	text-align: center;
	font-size: 16px;
}

.itemList li {
	position: relative;
	margin-bottom: 6px;
	padding: 1px;
	height: 60px;
	border: #D2D1B6 solid 1px;
	background-position: right center;
	background-repeat: no-repeat;
	cursor: pointer;
}

.itemList li::before {
	display: inline-block;
	overflow: hidden;
	margin-right: 68px;
	width: 15px;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	content: "";
	vertical-align: middle;
}

.recipe0::before {
	background-color: #D0D0D0;
}

.recipe1::before {
	background-color: #F9D486;
}

.recipe2::before {
	background-color: #EAE9B8;
}

.itemList li.rare::before {
	background-image: url(/image/shop/premium/mixer/ico_rare.png);
}

.itemList li:hover {
	background-color: #F8FDE6;
}

.itemList li.select::after {
	position: absolute;
	top: 6px;
	right: -15px;
	z-index: 100;
	width: 15px;
	content: "";
}

.itemList li img,
.itemList li canvas {
	position: absolute;
	top: 1px;
	left: 17px;
	display: block;
	height: 60px;
}

.itemList li .name {
	display: inline-block;
}

.itemList li .material {
	position: absolute;
	right: 5px;
	bottom: 3px;
	width: 300px;
	text-align: right;
}

.itemList li i {
	position: absolute;
	top: 3px;
	left: 83px;
	display: block;
	width: 30px;
	height: 17px;
	background: url(/image/shop/premium/mixer/ico_limited.png) no-repeat 0 0;
	font-size: 0;
}

.msg_mixer {
	position: absolute;
	bottom: 23px;
	left: 25px;
	padding: 15px 5px;
	width: 330px;
	border-radius: 25px;
	background-color: #F1F1D0;
	color: #D77516;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.5;
}

.btn_gotoshop {
	position: absolute;
	right: 20px;
	bottom: 3px;
	width: 200px;
	text-align: right;
	font-size: 11px;
}

.btn_gotoshop a {
	color: #777;
}

.btn_gotoshop a:hover {
	color: #978356;
}

.linkBtn {
	position: absolute;
	right: 15px;
	bottom: 10px;
	margin: 0;
	width: 265px;
}

.linkBtn .btn_help {
	float: left;
	width: 130px;
	text-align: right;
}

.linkBtn .btn_garden {
	float: right;
	width: 130px;
}

.linkBtn .btn_radius_gray a,
.searchBtn .btn_radius_gray a {
	box-shadow: none;
}

.linkBtn .btn_radius_gray a:hover {
	box-shadow: none;
	text-decoration: none;
	opacity: .8;
	transition: 0;
	transform: translateY(0);
}

/*プレビュー*/
.previewBox {
	position: relative;
	margin-bottom: 40px;
	margin-left: 10px;
	width: 390px;
	height: 484px;
	outline: #EEEEDC solid 2px;
	outline-offset: -3px;
	border: #CDCDCC solid 1px;
	background-color: #FFFFF0;
}

.noLoginView .previewBox {
	margin-bottom: 0;
}

.previewBox .no_select {
	width: 390px;
	height: 484px;
	background: url(/image/shop/premium/mixer/img_no_select.png) no-repeat;
	font-size: 0;
}

.previewBox h3 {
	position: relative;
	margin: 10px 10px 15px 10px;
	padding: 4px 8px;
	background-color: #C6AE5C;
	color: #FFF;
	text-shadow: 1px 1px 0 #B09949, -1px -1px 0 #B09949, -1px 1px 0 #B09949,
		1px -1px 0 #B09949, 0 1px 0 #B09949, 0-1px 0 #B09949, -1px 0 0 #B09949,
		1px 0 0 #B09949;
	font-size: 14px;
}

.previewBox h3::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 109px;
	height: 29px;
}

.previewBox h3.clothes::after {
	content: url(/image/shop/premium/mixer/ico_clothes.png);
}

.previewBox h3.house::after {
	content: url(/image/shop/premium/mixer/ico_house.png);
}

.previewBox h3.gitm::after {
	content: url(/image/shop/premium/mixer/ico_gitm.png);
}

.previewBox h3.interior::after {
	content: url(/image/shop/premium/mixer/ico_interior.png);
}

.previewBox h3.background::after {
	content: url(/image/shop/premium/mixer/ico_background.png);
}

.previewBox h4 {
	margin-bottom: 20px;
	padding-bottom: 2px;
	border-bottom: #AA9879 dashed 1px;
	color: #AA9879;
	text-align: center;
	font-size: 14px;
}

.previewBox figure,
.mode_miracle_item .mixedBox figure {
	position: relative;
	display: flex;
	float: left;
	margin: 0 0 15px 30px;
	width: 110px;
	border: #AA9879 solid 2px;
}

.previewBox figure img,
.previewBox figure canvas,
.mode_miracle_item .mixedBox figure img,
.mode_miracle_item .mixedBox figure canvas {
	margin: 0 auto;
}

.previewBox dl {
	float: right;
	margin: 10px 0 15px;
	width: 230px;
}

.mode_miracle_item dl {
	float: right;
	margin: 0;
	width: 220px;
}

.previewBox dl dt,
.mode_miracle_item dl dt {
	display: inline-block;
	margin: 0 10px 2px 0;
	padding: 1px 0;
	width: 63px;
	border-radius: 8px;
	background-color: #9A8561;
	color: #FFF;
	text-align: center;
	text-shadow: 1px 1px 0 #826C45, -1px -1px 0 #826C45, -1px 1px 0 #826C45,
		1px -1px 0 #826C45, 0 1px 0 #826C45, 0-1px 0 #826C45, -1px 0 0 #826C45,
		1px 0 0 #826C45;
	font-size: 10px;
}

.previewBox dl dd,
.mode_miracle_item dl dd {
	display: inline-block;
	width: 150px;
	vertical-align: middle;
	font-size: 10px;
}

.mode_miracle_item dl dd {
	width: 140px;
}

.previewBox dl dd a,
.mode_miracle_item dl dd a {
	text-decoration: underline;
}

.previewBox figure p.txt_owned,
.mode_miracle_item figure p.txt_owned {
	position: absolute;
	top: 0;
	left: 2px;
	padding: 1px 3px;
	border-radius: 0 0 5px 5px;
	background-color: #BD9048;
	color: #FFF;
	text-align: center;
	font-size: 10px;
}

.previewBox table {
	clear: both;
	margin: 20px auto 25px;
	width: 350px;
	text-align: left;
}

.previewBox table th {
	font-weight: normal;
}

.previewBox table th:first-child {
	width: 200px;
}

.previewBox table thead th:last-child,
.previewBox table td:last-child {
	width: 80px;
	text-align: right;
}

.previewBox table thead th {
	border-bottom: #B7B1A6 dashed 1px;
}

.previewBox table tbody th {
	padding-left: 20px;
	background: no-repeat 0 1px;
}

.previewBox table tbody .item th {
	background-image: url(/image/shop/premium/mixer/ico_item.png);
}

.previewBox table tbody .coin th {
	background-image: url(/image/shop/premium/mixer/ico_coin.png);
}

.previewBox table tbody .rarity_1 th {
	background-image: url(/image/shop/premium/mixer/rarity_1.png);
	background-size: 13px 13px;
}

.previewBox table tbody .rarity_2 th {
	background-image: url(/image/shop/premium/mixer/rarity_2.png);
	background-size: 18px 13px;
}

.previewBox table tbody .rarity_3 th {
	background-image: url(/image/shop/premium/mixer/rarity_3.png);
	background-size: 13px 13px;
}

.previewBox table tbody .rarity_4 th {
	background-image: url(/image/shop/premium/mixer/rarity_4.png);
	background-size: 18px 13px;
}

.previewBox table tbody .rarity_5 th {
	background-image: url(/image/shop/premium/mixer/rarity_5.png);
	background-size: 20px 13px;
}

.previewBox table tbody .rarity_6 th {
	background-image: url(/image/shop/premium/mixer/rarity_6.png);
	background-size: 21px 13px;
}

.previewBox table td del {
	position: relative;
	margin-right: 8px;
	color: #C86868;
}

.previewBox table td del::before {
	position: absolute;
	top: 0;
	left: -85px;
	display: block;
	width: 82px;
	height: 26px;
	color: #FFF;
	content: url(/image/shop/premium/mixer/ico_arrow02.png);
	text-align: center;
}

.previewBox table tbody .item th a {
	text-decoration: underline;
}

.btn_preview {
	margin: 0 auto;
	width: 350px;
	text-align: right;
}

.mixerListArea .btn_radius_gray.btn_preview a {
	padding: 2px 0 1px;
	width: 138px;
	font-size: 11px;
}

.btn_mixer {
	position: absolute;
	bottom: 28px;
	left: 0;
	width: 100%;
}

.mixerListArea a.btn_radius_pink {
	margin: 0 auto;
	width: 185px;
}

.mixerListArea .btn_radius_pink span::before {
	content: none;
}

.previewBox .btn_buyitem {
	position: absolute;
	right: 10px;
	bottom: 3px;
	width: 100%;
	text-align: right;
	font-size: 11px;
}

/*レシピの目印について*/
.aboutMark {
	margin: 13px;
	border: #CAC9AD solid 2px;
	border-radius: 4px;
	background-color: #F6F6ED;
}

.aboutMark h3 {
	margin: 2px 2px 10px 2px;
	padding: 3px 8px;
	background-color: #C3C0A4;
	color: #FFF;
	text-shadow: 1px 1px 0 #9C997C, -1px -1px 0 #9C997C, -1px 1px 0 #9C997C,
		1px -1px 0 #9C997C, 0 1px 0 #9C997C, 0-1px 0 #9C997C, -1px 0 0 #9C997C,
		1px 0 0 #9C997C;
	font-weight: bold;
	font-size: 16px;
}

.aboutMark ul {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.aboutMark ul li {
	display: block;
	align-self: flex-start;
	margin: 0 0 1px 10px;
	padding: 1px;
	width: 380px;
	border: #D2D1B6 solid 1px;
	background-color: #FFF;
	font-size: 13px;
}

.aboutMark ul li::before {
	display: inline-block;
	overflow: hidden;
	margin-right: 16px;
	width: 18px;
	height: 22px;
	content: "";
	vertical-align: -7px;
}

.aboutMark ul li.recipe,
.aboutMark ul li.limited,
.aboutMark ul li.rare {
	padding-left: 35px;
	width: 346px;
	background-position: 2px 3px;
	background-repeat: no-repeat;
	line-height: 22px;
}

.aboutMark ul li.recipe {
	background-image: url(/image/shop/premium/mixer/ico_recipe.png);
	background-position: 6px 3px;
}

.aboutMark ul li.limited {
	background-image: url(/image/shop/premium/mixer/ico_limited.png);
}

.aboutMark ul li.rare {
	background-image: url(/image/shop/premium/mixer/ico_rare2.png);
	background-position: 8px 3px;
}

/*モーダルウィンドウ*/
.content {
	margin: 0 auto;
	padding: 40px;
}

.modal_block {
	/*position: fixed;*/
	position: absolute;
	top: 0;
	z-index: 1000;

	/*モーダルウィンドウ全体ラップ部分*/
	display: none;
	width: 100%;

	/*height: 100vh;*/
	height: 100%;
}

.modal_bg {
	/*モーダルウィンドウを表示している時に背景をクリックしてもモーダルウィンドウを閉じられる*/
	position: absolute;
	z-index: 1010;
	width: 100%;

	/*height: 100vh;*/
	height: 100%;
	background: #EFECE4;
	opacity: .3;
}

.modal_content {
	/*モーダルウィンドウで表示するコンテンツ*/
	position: absolute;
	top: 50%;

	/*left: 50%;*/
	left: 48%;
	z-index: 1020;
	margin: 0 2% 2%;
	width: 480px;
	height: 430px;
	border: #FFF solid 1px;
	border-radius: 6px;
	background-color: #F8F8F0;
	box-shadow: 0 0 0 2px #D3D3D3;
	transform: translate(-50%, -50%);
}

.btn_modalclose a {
	position: absolute;
	top: -18px;
	right: -18px;
	display: block;
	width: 38px;
	height: 43px;
	background: url(/image/shop/pet/btn_close.png) no-repeat 0 0;
	font-size: 0;
}

.btn_modalclose a:hover {
	background: url(/image/shop/pet/btn_close_on.png) no-repeat 0 0;
	transition: .4s;
	transform: translateY(2px);
}

/*モーダルウインドウ内コンテンツ*/
.mixedBox {
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	border: 20px solid #E9E9E2;
	background: #FFF url(/image/shop/premium/mixer/bg_dot.png) no-repeat bottom center;
}

.mode_confirm .mixedBox,
.mode_normal .mixedBox,
.mode_locked .mixedBox {
	margin-top: 62px;
	width: 388px;
}

.mode_miracle .mixedBox {
	margin-top: 42px;
	width: 424px;
}

.mode_locked .mixedBox {
	height: 257px;
}

.mixedBox h3 {
	position: absolute;
	width: 482px;
	text-align: center;
}

.mode_normal .mixedBox h3 {
	top: -32px;
	left: -67px;
}

.mode_miracle .mixedBox h3 {
	top: -52px;
	left: -49px;
}

.mode_miracle_item .mixedBox h3 {
	top: -32px;
	left: 0;
	width: 100%;
}

.mode_mixer h3 {
	margin: 40px 0 15px;
	text-align: center;
}

.mode_locked h3 {
	position: relative;
	width: 348px;
}

.mixedBox figure {
	display: flex;
	margin: 30px auto 15px;
	width: 110px;
	border: #AA9879 solid 2px;
}

.mixedBox figure img {
	margin: 0 auto;
}

.mode_normal .btnArea,
.mode_miracle_item .btnArea {
	position: absolute;
	bottom: 20px;
	width: 481px;
}

.mixedBox .txt_mixed {
	margin: 0 auto 5px;
	width: 110px;
	text-align: center;
}

.mixedBox .txt_mixed i {
	display: block;
	font-style: normal;
}

.miracle_item {
	margin-top: 62px;
	padding-bottom: 30px;
	width: 420px;
	border: 20px solid #E9E9AC;
}

.mode_miracle .mixedBox.miracle_item h3 {
	top: -32px;
	left: -67px;
}

.modal_content.mode_error {
	position: absolute;
	top: 50%;
	left: 48%;
	z-index: 1020;
	margin: 0 2% 2%;
	width: 230px;
	height: 150px;
	border: #FFF solid 1px;
	border-radius: 6px;
	background-color: #FBF8E8;
	box-shadow: 0 0 0 2px #D3D3D3;
	text-align: center;
	transform: translate(-50%, -50%);
}

.modal_content.mode_error h4 {
	padding: 8px 0;
	font-size: 16px;
}

.btn_close {
	position: absolute;
	bottom: 10px;
	width: 100%;
}

.modal_content.mode_search {
	height: 300px;
	background-color: #FFF;
}

.mode_search .detail1,
.mode_sort .detail1 {
	padding: 20px;
}

h1.tit_modal {
	position: relative;
	margin: 1px 1px 0 1px;
	padding: 4px 0 2px 43px;
	border-bottom: #D3D3D3 solid 2px;
	border-radius: 3px 3px 0 0;
	color: #777;
	letter-spacing: 2px;
	font-weight: bold;
	font-size: 18px;
}

h1.tit_modal.search {
	background: url(/image/shop/premium/mixer/ico_search.svg) #F8F5ED no-repeat 12px 5px;
	background-size: 23px;
}

h1.tit_modal.sort {
	background: url(/image/shop/premium/mixer/icon_sort.png) #F8F5ED no-repeat 12px 5px;
	background-size: 23px;
}

.mode_search dl.search,
.mode_sort dl.sort {
	display: flex;
	flex-wrap: wrap;
	width: 440px;
	font-size: 14px;
}

.mode_search dl.search dt {
	padding: 18px 0 0;
	width: 120px;
	border-bottom: 1px dashed #D3D3D3;
}

.mode_search dl.search dt i {
	position: relative;
	display: inline-block;
	padding: 3px 10px 1px 5px;
	background-color: #FFF;
	vertical-align: -2px;
	cursor: pointer;
}

.mode_search dl.search dt span {
	display: none;
}

.mode_search dl.search dt i:hover span {
	position: absolute;
	top: 25px;
	left: -70px;
	z-index: 1000;
	display: inline-block;
	padding: 5px 10px;
	width: 360px;
	border-radius: 5px;
	background-color: #57544D;
	color: #FFF;
	font-size: 12px;
}

.mode_search dl.search dt i:hover span::before {
	position: absolute;
	top: -7px;
	left: 74px;
	width: 15px;
	height: 7px;
	background: url(/image/shop/premium/mixer/ico_huki.png) no-repeat 0 0;
	content: "";
}

.mode_search dl.search dd {
	padding: 15px 0;
	width: 320px;
	border-bottom: 1px dashed #D3D3D3;
}

.mode_search dl.search dd input {
	padding: 5px 10px;
	width: 260px;
	border: #BAB5A9 solid 2px;
	border-radius: 5px;
	color: #777;
	font-size: 12px;
}

.mode_search .searchBtn,
.mode_sort .searchBtn {
	margin: 0 auto;
	width: 285px;
}

.mode_search .searchBtn a,
.mode_sort .searchBtn a {
	margin-right: 25px;
}

.mode_sort .btn_search a {
	background-image: none;
	text-indent: 0;
	letter-spacing: 0;
}

.modal_content.mode_sort {
	height: 260px;
	background-color: #FFF;
}

.mode_sort dl.sort {
	padding: 15px 0 25px;
}

.mode_sort dl.sort dt {
	padding-left: 2em;
	width: 165px;
}

.mode_sort dl.sort dd label {
	margin-right: 15px;
}

input[type="radio"]+label::before {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-size: contain;
	content: "";
}

.mode_sort dl.sort input[type="radio"]+label:before {
	background-image: url(/image/shop/premium/mixer/ico_select.png);
}

.mode_sort .txt_detail {
	padding-bottom: 5px;
	padding-left: 2em;
	border-bottom: 1px dashed #D3D3D3;
	text-indent: -1em;
	font-size: 14px;
}

/*角丸ボタン小　灰*/
.btnArea {
	clear: both;
	margin: 30px 0 10px;
	height: 22px;
}

.mixerListArea .btn_login {
	text-align: center;
}

.mode_miracle .btnArea {
	margin: 14px 0 0;
}

.mode_confirm .btnArea {
	margin: 28px 0 0;
}

.mixerListArea .btn_radius_gray a {
	display: inline-block;
	padding: 4px 0;
	width: 130px;
}

.mixerListArea .btn_radius_gray a:hover {
	box-shadow: none;
	text-decoration: none;
	opacity: .8;
	transition: .2s;
	transform: translateY(2px);
}

.btn_ok {
	float: left;
	width: 233px;
	text-align: right;
}

.btn_cancel {
	float: right;
	width: 233px;
}

.mode_miracle_item .btn_cancel {
	float: none;
	width: 100%;
	text-align: center;
}

.txt_confirm {
	position: relative;
	display: table-cell;
	padding-left: 100px;
	height: 218px;
	vertical-align: middle;
	text-align: center;
	font-size: 14px;
}

.txt_confirm::before {
	position: absolute;
	top: 50px;
	left: 10px;
	content: url(/image/shop/premium/mixer/img_mixer.png);
}

.mixedItem {
	margin-bottom: 20px;
	width: 140px;
	border: 2px solid;
	border-radius: 10px;
	background-color: #FDFDED;
}

.mode_miracle .mixedItem {
	margin-bottom: 5px;
}

.mixedItem h4 {
	margin: -11px auto 0;
	width: 108px;
	height: 22px;
	border-radius: 8px;
	color: #FFF;
	text-align: center;
	text-shadow: 1px 1px 0 #9E9FA1, -1px -1px 0 #9E9FA1, -1px 1px 0 #9E9FA1,
		1px -1px 0 #9E9FA1, 0 1px 0 #9E9FA1, 0-1px 0 #9E9FA1, -1px 0 0 #9E9FA1,
		1px 0 0 #9E9FA1;
	line-height: 23px;
}

.mixedItem.normal {
	float: left;
	margin-left: 20px;
	border-color: #C5C5C4;
}

.mixedItem.miracle::before {
	position: absolute;
	top: 75px;
	left: -35px;
	content: url(/image/shop/premium/mixer/ico_plus.png);
}

.mixedItem.miracle {
	position: relative;
	float: left;
	margin-left: 40px;
	border-color: #D4D360;
}

.normal h4 {
	background-color: #C5C5C4;
	text-shadow: #9E9FA1;
}

.miracle h4 {
	background: #D4D360 url(/image/shop/premium/mixer/bg_kirakira.png) no-repeat center 3px;
	text-shadow: 1px 1px 0 #A4A34E, -1px -1px 0 #A4A34E, -1px 1px 0 #A4A34E,
		1px -1px 0 #A4A34E, 0 1px 0 #A4A34E, 0-1px 0 #A4A34E, -1px 0 0 #A4A34E,
		1px 0 0 #A4A34E;
}

.txt_miracle {
	margin: 25px 0 15px 23px;
}

.mode_miracle_item .txt_miracle {
	text-align: center;
}

.mixedBox .mixedItem figure {
	margin: 7px auto 10px;
}

.mode_miracle .mixedBox .mixedItem figure {
	margin: 7px auto 5px;
}

.mixedBox .mixedItem .txt_mixed {
	margin-bottom: 5px;
}

.mode_mixer figure {
	margin: 0 auto;
	width: 282px;
}