@charset "UTF-8";

@import"reset.css";
@import"basic.css";

/* ブラウザの初期値をクリア
............................................................... */
body,div,p,span,dl,dt,dd,
h1,h2,h3,h4,h5,h6,
address,ul,ol,li,
table,caption,th,td,img,form{
	margin:0;
	padding:0;
	border:none;
	font-style:normal;
	font-weight:normal;
	font-size:100%;
	text-align:left;
	list-style:none;
	list-style-type:none;
	vertical-align:middle;
}

textarea{
	font-size:100%;
}

img{
	border:none;
	vertical-align:bottom;
}

hr{
	display:none;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img{ 
	border:0;
}

address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:normal;
}

caption,th{
	text-align:left;
}

/* フォントの指定
............................................................... */
html,body{
	font-family:'Meiryo','Hiragino Kaku Gothic ProN', 'HiraKakuProN-W3','MS PGothic',sans-serif;
	font-size:16px;
}

/* Safari のレイアウト
............................................................... */
html*{
	margin:0;
	padding:0;
}

/* スクロールバー for FireFox & Opera
............................................................... */
html{
	min-height:100%;
	height:auto !important;
	height:auto;
/*	margin-bottom:1px;*/
}

/* リンクスタイル
............................................................... */
a:link{
/*	border:none;
	text-decoration:none;
*/	color:#003366;
}

a:active{
	border:none;
	text-decoration:none;
	color:#F00;
}

a:visited{
/*	border:none;
	text-decoration:none;
*/	color:#003366;
}

a:hover{
	border:none;
	text-decoration:underline;
	color:#F60;
}

/* フォーム
............................................................... */
/* チェックボックス */
input[type=checkbox] {
	display: none; /* checkboxを非表示にする */
}
label {
	display: block;
	position: relative; /* ボックスの位置を指定する */
	padding: 0 0 0 42px; /* ボックス内側の余白を指定する */
}
label:hover:after {
	border-color: #ff9900; /* ボックスの境界線を実線で指定する */
}
label:after {
	position: absolute; /* ボックスの位置を指定する */
	content: ""; /* ボックスのコンテンツ */
	display: block; /* ブロックレベル要素化する */
	top: 50%; /* 上部から配置の基準位置を決める */
	left: 15px; /* 左から配置の基準位置を決める */
	margin-top: -10px; /* チェック枠の位置 */
	width: 15px; /* ボックスの横幅を指定する */
	height: 15px; /* ボックスの高さを指定する */
	border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
	border-radius: 6px; /* ボックスの角丸を指定する */
}
label:before {
	position: absolute; /* ボックスの位置を指定する */
	content: ""; /* ボックスのコンテンツ */
	display: block; /* ブロックレベル要素化する */
	top: 50%; /* 上部から配置の基準位置を決める */
	left: 21px; /* 左から配置の基準位置を決める */
	margin-top: -7px; /* チェックマークの位置 */
	width: 5px; /* ボックスの横幅を指定する */
	height: 9px; /* ボックスの高さを指定する */
	border-right: 3px solid #ff9900; /* 境界線（右）のスタイルを指定する */
	border-bottom: 3px solid #ff9900; /* 境界線（下）のスタイルを指定する */
	transform: rotate(45deg); /* 要素を回転させる */
	opacity: 0; /* 要素を透過指定する */
}
input[type=checkbox]:checked + label:before{
	opacity: 1; /* 要素を表示する */
}

/* 全体設定
............................................................... */
html,body{
/*	background: linear-gradient(to right,#0033aa,#ffff88,#FFFFFF,#ff88dd,#0033aa);*/
/*	background: linear-gradient(to right,#ffbb66,#ffffff,#ffffff,#ffffff,#ffbb66);*/
}
body{
	width: 100%;
	height:100% !important;
	min-height:100%;
	font-size:100%;
	-webkit-text-size-adjust:none;
	text-align:center;
	color:#000;
/*	background:#fff;
	background-color:#ffffff;
	background-position:top center;
	background-repeat:no-repeat;
*/
	overflow: auto scroll;
	overflow: auto overlay;
}
/* スクロールバー */
body::-webkit-scrollbar {
	width: 10px;
}
body::-webkit-scrollbar-thumb {
	background-color: rgba(255,255,255,1.0);
	border: 1px solid rgba(255,170,68,1.0);
	border-radius: 5px;
}
body:hover::-webkit-scrollbar-thumb {
	background-color: rgba(255,170,68,0.5);
	border: 1px solid rgba(255,170,68,0.5);
}
body::-webkit-scrollbar-track {
	background-color: rgba(255,255,255,0.5);
}
body::-webkit-scrollbar-button {
	background-color: rgba(255,255,255,0.5);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
body::-webkit-scrollbar-button:horizontal:increment {
	background-image: url(/images/parts/scroll_arrow_l.png);
}
body::-webkit-scrollbar-button:horizontal:decrement {
	background-image: url(/images/parts/scroll_arrow_r.png);
}
body::-webkit-scrollbar-button:vertical:increment {
	background-image: url(/images/parts/scroll_arrow_d.png);
}
body::-webkit-scrollbar-button:vertical:decrement {
	background-image: url(/images/parts/scroll_arrow_u.png);
}
/* コンテナ */
#container{
	margin:0 auto;
	max-width:1600px;
	min-height:100%;
	height:100% !important;
	height:100%;
	background:#FFF;
	text-align:left;
	position:relative;
	background:none;
	overflow: hidden;
}
.clearfloat{
	clear:both;
	height:0;
	font-size:1px;
	line-height:0px;
}

#maincontents{
	width:80%;
	padding:0;
	float:right;
	box-sizing: border-box;
	position: relative;
}
#products{
	width:80%;
	margin:5px auto;
	float:left;
	padding: 0px 6px;
	box-sizing: border-box;
}
.inner{
	padding:10px;
	background:rgba(255,255,255,0);
	font-size:100%;
}

/* Loading */
.processing_loading {
	height: 200px;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.processing_loading .image {
	position: relative;
	top: 40px;
	left: 0;
	margin:auto;
	width: 120px;
	height: 120px;
	position: relative;
	transform: perspective(1000px);
	transform-origin: 50% 50% 0px;
	transform-style: preserve-3d;
	animation: rotate 1.25s infinite linear;
	background-image:url(../images/parts/loading.png);
	background-size:contain;
}
@keyframes rotate {
	0% {
		transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
	}
	100% {
		transform: perspective(1000px) rotateX(0deg) rotateY(-360deg);
	}
}
.processing_loading .text {
	position: absolute;
	top: 90px;
	left: 0;
	width:100%;
	transform-origin: 50% 50%;
	text-align:center !important;
	font-weight: bold !important;
	color: #5577ff !important;
}
.processing_loading .text:before {
	content:"Loading...";
}

/* 色、太さ
............................................................... */

.red{
	color:red;
}
.blue{
	color:blue;
}
.orange{
	color:orange;
}
.bold{
	font-weight:bold;
}


/* ヘッダ部分
............................................................... */

.header_back{
	position: relative;
}
/* ヘッダー背景画像*/
.header_image {
	background-image: url(https://img.amiami.jp/images/sitecontents/header/pc_header_j.png);
	background-repeat: no-repeat;
	height: 100px;
/*	background-color: rgba(255,255,255,1.0);*/
}
/* ヘッダーロゴ */
.header_back .header_logo{
	display: block;
	position: absolute;
	top: 20px;
	left: 17px;
	width: 200px;
}
.header_back .header_logo:hover {
/*	transform: scale(1.05);*/
}
.header_back .header_logo img{
	width: 100%;
	height: 100%;
	max-width: 220px;
}
.header_back .header_logo img:hover {
	animation: header_logo .25s 1;
}
@keyframes header_logo {
	0% {transform: scale(0.95);}
	25% {transform: scale(1.1);}
	50% {transform: scale(1.05);}
	75% {transform: scale(0.9);}
	100% {transform: scale(1.05);}
}

/* 検索窓 */
.searchbox{
	max-width: 1600px;
	width: 100%;
	height: 30px;
	padding: 0px 3px;
	position: relative;/* IE対応 */
	position: -webkit-sticky;
	position: sticky;
	margin: 67px auto -97px;
	top: 0px;
	left: 0;
	z-index: 6;
	background: none;
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: flex-end;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	border:1px solid rgba(0,0,255,0.0);
	pointer-events: none;
}
/* Edgeのみ */
@supports (-ms-ime-align: auto) {
	body{
		margin-top: -127px;
		margin-bottom: 0px;
	}
	.searchbox{
		margin: 97px auto 0px;
	}
}
/* jQuery UIの上書き */
.ui-state-active {
	color: #ee7711 !important;
	background-color: rgba(255,255,255,1) !important;
}
.ui-state-active.delete_all,
.ui-state-active.delete_single,
.ui-state-active.suggest,
.ui-state-active.originaltitle,
.ui-state-active.character,
.ui-state-active.series,
.ui-state-active.brand,
.ui-state-active.elements{
	border-color: #ee7711 !important;
}
.ui-state-active.delete{
	border:none !important;
	margin: 1px 0 0 1px !important;
}
/* サジェストリスト */
.ui-menu-item .delete{
	display: block;
	width: 30px;
	height: 30px;
	position: absolute !important;
	right: 0px;
	box-sizing: border-box;
	color: #999999;
	font-size: 150%;
	line-height: 30px;
	text-align: center;
	z-index: 1;
	padding: 0 !important;
}
.ui-menu-item .delete:hover{
	color:#ff9900;
	text-decoration: none;
}
.ui-menu-item .delete p {
	width: 30px;
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
}
.ui-menu-item .delete_all{
	font-weight: bold;
	border-top: 1px dotted #cccccc;
}
.ui-menu-item .delete_all:after{
	content:" ";
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 30px;
	background-image: url(/images/parts/menu_trashbox.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left 16px top 0px;
}

.ui-menu .ui-menu-item-wrapper {
    padding-left: 65px !important;
}
.ui-menu-item-wrapper.history:before,
.ui-menu-item-wrapper.suggest:before,
.ui-menu-item-wrapper.originaltitle:before,
.ui-menu-item-wrapper.character:before,
.ui-menu-item-wrapper.series:before,
.ui-menu-item-wrapper.brand:before,
.ui-menu-item-wrapper.elements:before{
	font-size:100%;
	border: 1px solid rgba(128,128,128,0);
	padding: 0px 2px;
	margin-right: 5px;
	border-radius: 13px;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	width: 52px;
	height: 26px;
	display: block;
	text-align: center;
	position: absolute;
	left: 5px;
	top: 3px;
	box-sizing: border-box;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.ui-menu-item-wrapper.history:before{
	content: "履歴";
	font-size:100%;
	color: rgba(128,128,128,1);;
	background-color: #ffffff;
	border-color: rgba(192,192,192,1);
}
.ui-menu-item-wrapper.suggest:before{
	content: "候補";
	font-size:100%;
	color: rgba(128,128,128,1);;
	background-color: #ffffff;
	border-color: rgba(192,192,192,1);
}
.ui-menu-item-wrapper.originaltitle:before{
	content: "原作";
	font-size:100%;
	color: #ffffff;
	background-color: #55dd55;
}
.ui-menu-item-wrapper.character:before{
	content: "キャラ";
	font-size:85%;
	color: #ffffff;
	background-color: #55bbff;
}
.ui-menu-item-wrapper.series:before{
	content: "シリーズ";
	font-size:70%;
	color: #ffffff;
	background-color: #ffaa44;
}
.ui-menu-item-wrapper.brand:before{
	content: "ブランド";
	font-size:70%;
	color: #ffffff;
	background-color: #ff5555;
}
.ui-menu-item-wrapper.elements:before{
	content: "要素";
	font-size:100%;
	color: #ffffff;
	background-color: #9977ff;
}

/* 検索列：左 */
.searchbox_left {
	float:none;
	width: 32%;
	flex-basis: 32%;
	max-width:32%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	pointer-events: none;
}
/* 検索列：中央 */
.searchbox_center {
	float:none;
	width: 40%;
	flex-basis: 40%;
	max-width:40%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	position: relative;
	top: 0;
	left: 0;
	pointer-events: auto;
}
.searchbox_center form{
	height: 100%;
}
.searchbox_center .search_cate {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 25%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	border: 2px solid #ffaa44;
	border-right:none;
	border-radius: 8px 0px 0px 8px;
	-moz-border-radius: 8px 0px 0px 8px;
	-webkit-border-radius: 8px 0px 0px 8px;
	background-color:#ffffff;
}
.searchbox_center .search_form{
	position: absolute;
	top: 0px;
	left: 25%;
	width: 65%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	border: 2px solid #ffaa44;
}
.searchbox_center .search_btn{
	position: absolute;
	top: 0px;
	right: 0;
	width: 10%;
	height: 100%;
	padding-left: 32px;
	background-color: #ffaa44;
	color: #ffffff;
	font-weight: normal;
	border: 2px solid #ffaa44;
	box-sizing: border-box;
	display: block;
	border-radius: 0px 8px 8px 0px;
	-moz-border-radius: 0px 8px 8px 0px;
	-webkit-border-radius: 0px 8px 8px 0px;
	cursor:pointer;
	background-image: url(../images/parts/menu_search.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: center;
	color: transparent;
	font-size: 0;
	transition: 0.2s;
}
.search_btn:hover {
	background-color: #ffbb66;
	border-color: #ffbb66;
}
/* 検索列：右 */
.searchbox_right {
	float:none;
	width:28%;
	flex-basis: 28%;
	max-width:28%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	position: relative;
	pointer-events: auto;
}
/* 検索列：右のボタン */
.searchbox_right .header_btn{
	float: left;
	line-height: 1em;
	width: 50%;
	height: 100%;
	margin: 0;
	padding: 3px;
	display: block;
	background-color: #ffaa44;
	background-size: contain;
	background-position-x: 7px;
	background-repeat: no-repeat;
	border: 1px solid #ffffff;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	box-sizing: border-box;
	font-weight: bold;
	font-size: 80%;
	text-align: center;
	color: #ffffff;
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	cursor: pointer;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	transition: 0.2s;
}
.searchbox_right .header_btn:hover{
	background-color: #ffbb66;
}
/* 検索列：右のボタン：カートを見る */
.searchbox_right .header_btn.cart {
	background-image: url(/images/parts/menu_cart.png);
	padding-left: 40px;
}
.searchbox_right .header_btn.cart:before {
    content: "カートを見る";
}
/* 検索列：右のボタン：お気に入りリスト */
.searchbox_right .header_btn.mylist {
	background-image: url(/images/parts/menu_mylist.png);
	padding-left: 40px;
}
.searchbox_right .header_btn.mylist:before {
    content: "お気に入りリスト";
}

/* ヘッダーバナー */
.headerbanner{
	overflow: visible;
	width: 528px;
	max-width: 50vw;
	position: absolute;
	top: 4px;
	right: 4px;
}

/* ヘッダーバナー：表示エリア */
.headerbanner .viewport {
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
}
/* ヘッダーバナー：スナップ領域 */
.headerbanner .viewport #flipsnap {
	position: relative;
}
.headerbanner .viewport #flipsnap .item {
	float: left;
	width: 468px;
	max-width: 40vw;
/*	height: 60px;*/
	font-size: 10px;
	text-align: center;
	background: #EFEFEF;
	color: #ffffff;
	background-color: transparent;
	margin-left: 5px;
	margin-right: 5px;
}
.headerbanner .viewport #flipsnap .item img {
	width: 100%;
	height: auto;
}
/* ヘッダーバナー：コントロール：全体 */
.headerbanner #control{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.headerbanner #control a{
	color: #ccc;
}
.headerbanner #control a:hover{
	color: #fe8c08;
}
/* ヘッダーバナー：コントロール：PREV/NEXTボタン */
.headerbanner #control .prev,
.headerbanner #control .next{
	position:absolute;
	width: 36px;
	height: 36px;
	top: calc( 50% - 18px);
	border: 2px solid #ccc;
	background-color:#ffffff;
	box-sizing: border-box;
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	z-index: 1;
}
.headerbanner #control .prev{left: 0px;}
.headerbanner #control .next{right: 0px;}

.headerbanner #control .prev div,
.headerbanner #control .next div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	font-weight:bold;
}
.headerbanner #control .prev:hover,
.headerbanner #control .next:hover{
	border-color: #ff9900;
	background-color: #ff9900;
	color: #ffffff;
}

/* 中央バナー */
.center_banner_inner {
	overflow: visible;
	width: 100%;
	position: relative;
	margin: 10px auto;
}
.viewport_center {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-sizing: border-box;
}
#flipsnap_center{
	position: relative;
}
#flipsnap_center .item {
	float: left;
	width: 45vw;
	max-width: 750px;
	font-size: 10px;
	text-align: center;
	background: #EFEFEF;
	color: #ffffff;
	background-color: transparent;
	margin-left: 5px;
	margin-right: 5px;
}
#flipsnap_center .item img{
	width:100%;
	height: auto;
}
#center_banner_control{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
}
#center_banner_control a{
	color: #ccc;
}
#center_banner_control .prev,
#center_banner_control .next{
	position: absolute;
	width: 36px;
	height: 36px;
	top: calc( 50% - 18px);
	border: 2px solid #ccc;
	background-color: #ffffff;
	box-sizing: border-box;
	border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	z-index: 1;
}
#center_banner_control .prev{
	left: 0px;
}
#center_banner_control .next{
	right: 0px;
}
#center_banner_control .prev:hover,
#center_banner_control .next:hover {
	border-color: #ff9900;
	background-color: #ff9900;
	color: #ffffff;
}
#center_banner_control .prev div,
#center_banner_control .next div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	font-weight: bold;
}

/* */
.header_info{
	margin:3px auto 1px;
	padding:0 0 2px 2px;
	background-color:#EEEEEE;
	width:590px;
	height:17px;
	font-size:90%;
}
.contents_attention{
	margin: 2px auto;
	font-size: 90%;
	border: 1px solid #cccccc;
	border-left: 6px solid #cccccc;
	background-color:rgba(255,255,255,0.75);
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	box-sizing: border-box;
	position:relative;
	transition: 0.2s;
}
.contents_attention dt.closed:before,
.contents_attention dt.opened:before,
.contents_attention dt.link:before{
	display:block;
	width:32px;
	height:32px;
	box-sizing: border-box;
	border-radius:16px;
	color:#999999;
	font-size: 20px;
	line-height:32px;
	text-align:center;
	position:absolute;
	right:10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: all 0.25s ease-out;
}
.contents_attention dt.closed:before{content:">";transform: translateY(-50%) rotate( 90deg );}
.contents_attention dt.opened:before{content:">";transform: translateY(-50%) rotate( -90deg );}
.contents_attention dt.link:before{content:">";pointer-events: none;}

.contents_attention.important{
	border-color:#ff0000;
}
.contents_attention:hover,
.contents_attention.important:hover{
	border-color: #ff9900;
}
.contents_attention dt{
	cursor:pointer;
	position: relative;
	top: 0;
	left: 0;
/*	margin:-1px;*/
}
.contents_attention dt:hover,
.contents_attention.important dt:hover {
	color: #ff9900;
}
.contents_attention dt .updatedate{
	color:#999999;
	font-size:80%;
	position: absolute;
	left: 12px;
	top: 0px;
}
.contents_attention dt span.text,
.contents_attention dt a{
	width: calc( 100% - 38px);
	height: 100%;
	display: block;
	padding: 12px 4px 0px 12px;
	box-sizing: border-box;
}
.contents_attention dt.opened span {
    font-weight: bold;
}
.contents_attention dt a:hover {
	text-decoration: none;
}

.contents_attention dd{
	border-top: 1px solid #cccccc;
	font-weight:lighter;
	padding-left:20px;
}
.contents_attention dd.opened{
	display:block !important;
}

.view_attention_history{
	text-align: right;
	font-size: 80%;
	padding: 3px 5px;
	margin: 9px 0px 1px 0px;
}
.view_attention_history a {
	border: 1px solid rgba(128,128,128,0);
	border-radius: 18px;
	background-color: rgba(255,255,255,0.75);
	padding: 8px;
	box-sizing: border-box;
	text-decoration: none;
}
.view_attention_history a:hover {
	border-color: #ff9900;
}

/* 人気ワード
............................................................... */
.popular_word{
	margin-bottom: 10px;
	padding: 8px 4px;
	border-bottom: 2px solid #cccccc;
}
.popular_word_inner{
	margin: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-evenly;
	box-sizing: border-box;
}
.popular_word_inner:before{
	content: "注目のワード";
	color: #333333;
	margin: 2px;
	padding: 2px 6px;
	font-weight: bold;
}
.popular_word_inner div a{
	float: left;
	font-size: 100%;
	margin: 2px;
	padding: 2px 6px;
	border: 1px solid #999999;
	background-color: #ffffff;
	color:#333333;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	box-sizing: border-box;
	text-decoration: none;
	font-weight:normal;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.popular_word_inner div a:hover{
	color: #ff9900;
	border-color: #ff9900;
	text-weight: bold;
}

/* ドロワーメニュー
............................................................... */
.navigation_menu #drawer{
	display:none;
}
#drawer dt {
	font-size: 130%;
	color: #003366;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(128,128,128,0);
	border-bottom: 1px solid #cccccc;
	box-sizing: border-box;
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
	background-image: none;
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: 5px 1px;
	height: 8vmin;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
#drawer dt a {
	width: 100%;
	height: 100%;
	text-decoration: none;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
#drawer dt.closed:before,
#drawer dt.opened:before,
#drawer dt.link:before{
	display:block;
	width:32px;
	height:32px;
	box-sizing: border-box;
	border-radius:16px;
	color:#999999;
	font-size: 80%;
	line-height:32px;
	text-align:center;
	position:absolute;
	right:0px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	transition: all 0.25s ease-out;
}
#drawer dt.closed:before{content:">";transform: translateY(-50%) rotate( 90deg );}
#drawer dt.opened:before{content:">";transform: translateY(-50%) rotate( -90deg );}
#drawer dt.link:before{content:">";}

#drawer .navi_01,
#drawer .navi_02,
#drawer .navi_03,
#drawer .navi_04,
#drawer .navi_05{
	background-image: url(../images/parts/menu_category.png);
	background-size: contain;
	font-weight: bold;
	color: #003366;
}
#drawer .navi_01:hover,
#drawer .navi_02:hover,
#drawer .navi_03:hover,
#drawer .navi_04:hover,
#drawer .navi_05:hover{
    color: #ee7711;
}

#drawer .navi_02{
	background-image: url(../images/parts/menu_login.png);
}
#drawer .navi_02 font{
	padding-left: 24px;
}
#drawer .navi_03{
	background-image: url(../images/parts/menu_info.png);
}
#drawer .navi_04{
	background-image: url(../images/parts/menu_kaitori.png);
}
#drawer .navi_05{
	background-image: url(../images/parts/menu_quest.png);
}

#drawer .genre dt {
	font-weight: bold;
	text-align: center;
	border-bottom: none;
	margin-bottom: -1px;
}

#drawer .genre dd {
	height:auto;
	top: 0;
	left: 0;
	padding-left: 2px;
	padding-right: 2px;
	color: #003366;
	font-size: 100%;
	font-weight: bold;
	position: relative;
	border-bottom: solid 1px #cccccc;
	background-color: #ffffff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background: none;
	justify-content: start;
	box-sizing: border-box;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#drawer .genre dd a{
	flex-basis: calc( (100% / 2) - 4px );
	width: calc( (100% / 2) - 4px );
	height: 50px;
	display: inline-flex;
	position: relative;
	border: 1px solid rgba(128,128,128,0);
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	text-decoration: none;
	box-sizing: border-box;
}
#drawer .genre dd a:hover{
	border-color: #ff9900;
	text-decoration: none;
}
#drawer .genre dd div{
	position: absolute;
	padding-left: 56px;
	height: 100%;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	box-sizing: border-box;
}
#drawer .genre dd img {
    width: auto;
    height: 100%;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

/* ナビゲーション部分
............................................................... */
#navigation{
/*	padding: 1px 1px 0px 1px;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background: none;
	justify-content: start;
	box-sizing: border-box;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#navigation a {
	width: 100%;
	height: 100%;
	display: block;
}
#navigation li{
	width: 20%;
	flex-basis: 20%;
	max-width:20%;
	height: 31px;
	background-color: rgba(255,255,255,0.75);
	border-top: solid 3px #a5dc00;
	border-bottom: solid 1px #cccccc;
	box-sizing: border-box;
	background-image: none;
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: 5px 1px;
	overflow: hidden;
	transition: 0.2s;
}
#navigation li:hover{
	background-color: rgba(255,255,255,1.0);
	border-color:#ffbb33;
	transform: scale(1.05);
	z-index: 1;
}
#navigation .navi_01{
	background-image: url(../images/parts/menu_category.png);
	border-top: solid 3px #ff8a00;
	border-left: solid 1px #cccccc;
	border-right: solid 1px #cccccc;
}
#navigation .navi_01.selected{
	background-color: #fbae52;
}
#navigation .navi_01.selected font{
	color:#ffffff;
	font-weight:bold;
	margin-left: -4px;
}
#navigation .navi_02{
	background-image: url(../images/parts/menu_login.png);
}
#navigation .navi_02 font{
	padding-left: 24px;
}
#navigation .navi_03{
	background-image: url(../images/parts/menu_info.png);
}
#navigation .navi_04{
	background-image: url(../images/parts/menu_kaitori.png);
}
#navigation .navi_05{
	background-image: url(../images/parts/menu_quest.png);
}
#navigation font{
	display:block;
	font-size:90%;
	position: relative;
	top: 4px;
	text-align: center;
}
/*
#navigation font.category{
	display: inline;
	top: 2px;
	left:43px;
	position: relative;
	padding-left:0px;
	padding-top: 4px;
}
*/
#navigation a:link{
	border:none;
	text-decoration:none;
	color:#444;
}
#navigation a:active{
	border:none;
	text-decoration:none;
	color:#F00;
}
#navigation a:visited{
/*	border:none;
	text-decoration:none;
*/	color:#444;
}
#navigation a:hover{
	border:none;
	text-decoration:none;
	color:#F60;
}

#header #genreframe{
	display:block;
	position:relative;
/*	margin-left:1px;*/
}
#header #genre{
	display:block;
	background-color:rgba(255,255,255,1.0);
	width:20%;
	padding-top:6px;
	padding-bottom:3px;
	position:absolute;
	border:solid 1px #999999;
	-webkit-box-shadow: 0 6px 3px -3px #777;
	-moz-box-shadow: 0 6px 3px -3px #777;
	box-shadow: 0 6px 3px -3px #777;
	-webkit-border-radius: 0px 0px 6px 6px;
	-moz-border-radius: 0px 0px 6px 6px;
	border-radius: 0px 0px 6px 6px;
	box-sizing: border-box;
	z-index: 3;
}
#header #genre a{
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	transition: 0.2s;
}
#header #genre a:link{
	color:#444;
}
#header #genre a:active{
	color:#F00;
}
#header #genre a:visited{
	color:#444;
}
#header #genre a:hover{
/*	margin-left: 5px;*/
	border-color: #ff9900;
	font-weight: bold;
	color:#ee7711;
	text-decoration: none;
}
#header #genre a:hover font{
	font-weight: bold;
	color: #ee7711;
}
#header #genre dt{
	z-index:0;
	height:26px;
	border-left: 0px solid rgba(255,255,255,0);
/*	background-color:#ffffff;*/
	background-color: rgba(255,255,255,0);
	background-image:none;
	white-space: nowrap;
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	transition: 0.2s;
}
#header #genre dt:hover {
	border-left: 5px solid #ff9900;
}
#header #genre dt:hover font{
	font-weight: bold;
	color: #ee7711;
}
#header #genre dt.divider{
	border-top: #cccccc 1px solid;
	border-left: none !important;
	height:3px;
	margin:0px 6px;
}
#header #genre dt.select{
	border:solid 1px #ffc633;
}

#header #genre dt font{
	width: 100%;
/*	height: 100%;*/
	float:left;
	display:block;
	overflow:hidden;
	margin:auto 0px auto 4px;
	font-size:80%;
	font-weight:normal;
	color:#003366;
	text-decoration:none;
	box-sizing: border-box;
	transition: 0.2s;
}
#header #genre dt font:hover{
	font-weight:bold;
	color:#ee7711;
}
#header #genre dt font.sub:hover{
	text-decoration:none;
}
#header #genre dt img.thumb{
	margin-top:1px;
	margin-left:1px;
	width:20px;
	height:20px;
	float:left;
}
#header #genre dt img.arrow-r{
	margin-top:4px;
	padding:0;
	width:6px;
	height:12px;
	display:block;
	background:url(../images/parts/arrow-r.png) no-repeat;
	position: absolute;
	right: 0;
	top: 0;
}

#header #genre dd{
	top:0px;
	left:100%;
	width:240px;
	height:264px;
	margin-top:-25px;
	padding-left:2px;
	padding-right: 2px;
	color:#003366;
	font-size:90%;
	font-weight:bold;
	position:absolute;
	border:solid 1px #999999;
	background-color:rgba(255,255,255,1.0);
	display:block;
	white-space: nowrap;
	overflow:hidden;
	-webkit-box-shadow: 0 6px 3px -3px #777;
	-moz-box-shadow: 0 6px 3px -3px #777;
	box-shadow: 0 6px 3px -3px #777;
	overflow: auto overlay;
}
/* インデックス：スクロールバー*/
#header #genre dd::-webkit-scrollbar {
	width: 7px;
}
#header #genre dd::-webkit-scrollbar-thumb {
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	border-radius: 3px;
}
#header #genre dd:hover::-webkit-scrollbar-thumb {
	border-color:#ffaa44;
}
#header #genre dd::-webkit-scrollbar-track {
	background-color: #eeeeee;
}
#header #genre dd div{
	width: 94%;
	height:32px;
	display:block;
	position: relative;
	top: 0;
	left: 1%;
	transition: 0.2s;
}
#header #genre dd div:hover{
	transform: scale(1.075) translate(4px, 0px);
}
#header #genre dd div font {
	width: 80%;
	display: block;
	padding-left: 40px;
}
#header #genre dd div font:hover {
}
#header #genre .title{
	display: block;
	text-align: center;
	margin: 2px 0px;
	padding: 4px 0px;
	font-size:120%;
	font-weight:bold;
	color:#ee7711;
	box-sizing: border-box;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left 3px top 0px;
}
/*
#header #genre2 dd:nth-of-type(1) .title{	background-image: url(https://img.amiami.com/images/genre/icon/1000.png);}
#header #genre2 dd:nth-of-type(2) .title{	background-image: url(https://img.amiami.com/images/genre/icon/2000.png);}
#header #genre2 dd:nth-of-type(3) .title{	background-image: url(https://img.amiami.com/images/genre/icon/3000.png);}
#header #genre2 dd:nth-of-type(4) .title{	background-image: url(https://img.amiami.com/images/genre/icon/4000.png);}
#header #genre2 dd:nth-of-type(5) .title{	background-image: url(https://img.amiami.com/images/genre/icon/5000.png);}
#header #genre2 dd:nth-of-type(6) .title{	background-image: url(https://img.amiami.com/images/genre/icon/6000.png);}
#header #genre2 dd:nth-of-type(7) .title{	background-image: url(https://img.amiami.com/images/genre/icon/7000.png);}
#header #genre2 dd:nth-of-type(8) .title{	background-image: url(https://img.amiami.com/images/genre/icon/8000.png);}
#header #genre2 dd:nth-of-type(9) .title{	background-image: url(https://img.amiami.com/images/genre/icon/9000.png);}
*/
#header #genre dd a{
	border: 1px solid rgba(128,128,128,0);
	box-sizing: border-box;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	text-decoration: none;
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	transition: 0.2s;
}
#header #genre dd a img{
	width: auto;
	height: 100%;
	border-radius: 16px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -1;
	transition: 0.2s;
}
#header #genre dd a:hover img {
/*	margin-left: 5px;*/
}

/* ユーザーインフォメーション
............................................................... */
.userinfo{
	float: right;
	z-index: 2;
	width: 20%;
	padding: 4px 5px;
	box-sizing: border-box;
}
.userinfo .userinfo_inner{
	background-color: rgba(255,255,255,0.75);
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	padding: 4px;
}
.userinfo .userinfo_inner br{
	clear: both;
}
.userinfo .userinfo_data{
	float: left;
	text-align: left;
	font-size: 9pt;
	line-height: 100%;
	margin: 4px;
}
.userinfo .userinfo_data2{
	float: right;
	text-align: left;
	font-size: 10pt;
	line-height: 100%;
	margin: 4px;
}
.userinfo .userinfo_name{
	color:blue;
	font-weight:bold;
}
.userinfo .userinfo_point{
	color:red;
	font-weight:bold;
}
.userinfo .userinfo_notice .userinfo_notice_inner{
	color: #ff0000;
	font-size: 75%;
	font-weight: bold;
	border: 1px solid #ff0000;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	padding: 4px 4px 4px 25%;
	background-image: url(/images/parts/icon_exclamation.png);
	background-repeat: no-repeat;
	background-size: 20%;
	background-position: left 3% top 50%;
	background-color: #ffccdd;
	transition: 0.2s;
}
.userinfo .userinfo_notice .userinfo_notice_inner:hover {
	background-size: 25%;
	background-position: left 1% top 50%;
}
/* IEのみ */
@media all and (-ms-high-contrast: none){
	.userinfo{
		top: 0px;
	}
}
/* Safariのみ*/
_::-webkit-full-page-media, _:future, :root .userinfo {
	top: 0px;
}


/* コンテンツ部分
............................................................... */
#wrapper{
	background:none;
	height:auto;
}


/* フッター
............................................................... */
#footer{
	margin: 0 auto;
	padding: 36px 0;
	display:block;
	bottom:1px;
	clear: both;
	text-align:center;
/*	background-color: rgba(238, 238, 238, 1.0);*/
	background-color: rgba(238, 238, 238, 0.5);
	border-top: 2px solid #cccccc;
}
/* ロゴ */
#footer .logo{
	width: 200px;
	margin: 0px auto 32px;
}
#footer .logo img{
	width: 100%;
	opacity: 1.0;
}
#footer .logo img:hover{
	opacity: 0.75;
}
/* リンク */
#footer .contents{
	display: table;
	margin: 10px auto 4px auto;
}
#footer .contents_list li{
	float: left;
	margin: 2px 4px;
	font-size: 80%;
}
#footer .contents_list li:after{
	content:"　|";
}
#footer .contents_list li:last-child:after{
	content:"";
}


#footer .contents a{
}
#footer .contents a:hover{
	text-decoration:underline;
	color:#F60;
}
/* コピーライト */
#footer .copyright{
	margin-top:2px;
	padding-top:2px;
	padding-right:20px;
	color:#999999;
	font-size:70%;
	text-align:center;
}
#footer .copyright:before{
	content:"© ";
}
/* 古物商許可証 */
#footer .kobutsu{
	margin-top:2px;
	padding-top:2px;
	padding-right:20px;
	color:#999999;
	font-size:70%;
	text-align:center;
	bottom:0;
}

/* コンテンツ部分 → インフォメーション
............................................................... */
.information{
	clear: left;
	width:80%;
	padding: 0px 6px;
	box-sizing: border-box;
}
.information .heading_07{
    clear: left;
}
.support_box{
	margin-bottom:5px;
	padding:5px;
	font-size:74%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: flex-start;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.information_item{
/*
    width: calc(100% / 2);
	max-width:  calc(100% / 2);
	flex-basis: calc(100% / 2);
*/
	width: 33%;
	max-width: 33%;
	flex-basis: 33%;
	padding: 4px 8px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.75);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}
.attention_box{
	margin:5px 7px 2px 3px;
	padding:5px;
	border:1px solid #CCC;
	background-color:#FAFAFA;
	font-size:74%;
}
/*
#support_box a:link{
	border:none;
	text-decoration:underline;
}
#support_box a:active{
	border:none;
	text-decoration:none;
	color:#F00;
}
#support_box a:visited{
/*	border:none;
	text-decoration:none;
*/
}
#support_box a:hover{
	border:none;
	text-decoration:underline;
	color:#F60;
}
*/
.support_left{
	float:left;
	width:50%;
	padding: 0px 5px;
	box-sizing: border-box;
}
.support_right{
	float:left;
	width:50%;
	padding: 0px 5px;
	box-sizing: border-box;
}
.support_title{
	font-weight:bold;
	color:#666;
	margin-bottom:3px;
	border-left: 5px solid #aaaaaa;
/*	border-bottom: 1px solid #aaaaaa;*/
	padding-top:2px;
	padding-right:2px;
	padding-bottom:2px;
	padding-left:5px;
}
.support_data{
	line-height:1.6em;
	margin-bottom:10px;
	margin-left:10px;
	color:#666;
}
.support_data li {
	font-weight: bold;
	color: red;
}
.support_data li.indent {
	padding-left:10px;
	font-weight:normal;
	color:#666;
}
.support_address{
	clear:both;
	color:#666;
	padding: 0px 5px;
	box-sizing: border-box;
}
.faq_sub{
	font-size:100%;
	font-weight:bold;
	padding:2px;
	margin-bottom:5px;
	margin-top:3px;
}
.gototop{
	text-align:right;
	font-size:80%;
	padding:3px 5px 3px 1px;
	margin:5px 6px 10px 2px;
	text-decoration:underline;
}
/* スマホ切替 */
.switch_viewmode{
	width: 60vw;
	position: fixed;
	bottom: 4px;
	left: 50vw;
	transform: translate(-50%, 0px);
	margin: auto;
	z-index: 12;
}
.switch_viewmode .btn{
	display: block;
	border: 2px solid rgba(128,128,128,0);
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.75);
	-webkit-border-radius: 6vmin;
	-moz-border-radius: 6vmin;
	border-radius: 6vmin;
	transition: 0.2s;
}
.switch_viewmode .btn:hover {
	border-color: #ff9900;
}
.switch_viewmode .btn a{
	display: block;
	font-size: 3vmin;
	text-align: center;
	text-decoration: none;
	width: auto;
	padding: 4px 4px 4px 10%;
	border: none;
	box-sizing: border-box;
	background-image: url(/images/parts/menu_smartphone.png);
	background-repeat: no-repeat;
	background-size: auto 80%;
	background-position: left 5% center;
}
/* マイページトップのログイン名表示エリア */
.divmaru   {   
	background-color:#FAFAFA;
	border: 1px solid #d7d7d7;

	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;       /* Firefox用 */  
	border-radius: 10px;            /* CSS3 */  

}

/* スクロールボタン */
#scrolltop{
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 50px;
	height: 50px;
	color:#ffffff;
	background-color:#ffaa44;
	cursor: pointer;
	opacity: 0.5;
	z-index: 20;
	border-radius: 25px;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	transition: 0.2s;
}
#scrolltop:hover{
	animation: scalepop 0.3s 1;
	opacity: 1.0;
}
@keyframes scalepop {
	0% {transform: scale(0.8);}
	25% {transform: scale(1.2);}
	50% {transform: scale(1.1);}
	75% {transform: scale(0.9);}
	100% {transform: scale(1.0);}
}
#scrolltop:after {
	padding-top:5px;
	font-size:150%;
	content: "▲";
	display: block;
	text-align: center;
	width: 100%;
	margin: auto;
}

/* Google reCAPTCHA */
.grecaptcha-badge {
	bottom: 70px !important;
}