@charset "UTF-8";

/* 全体設定
............................................................... */
body{
	background-color:#ffffff;
	text-align:center;
	margin:0;
	font-size:100%;
	font-family: 'Meiryo','Hiragino Kaku Gothic ProN', 'HiraKakuProN-W3','MS PGothic',sans-serif;
	width: calc(100vw - 40px);
	max-width: 1600px;
	margin: auto;
	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(/gold/amiami/images/parts/scroll_arrow_l.png);
}
body::-webkit-scrollbar-button:horizontal:decrement {
	background-image: url(/gold/amiami/images/parts/scroll_arrow_r.png);
}
body::-webkit-scrollbar-button:vertical:increment {
	background-image: url(/gold/amiami/images/parts/scroll_arrow_d.png);
}
body::-webkit-scrollbar-button:vertical:decrement {
	background-image: url(/gold/amiami/images/parts/scroll_arrow_u.png);
}
/* コンテナ */
#container{
	width:100%;
	margin:0 auto;
	text-align:left;
	overflow: hidden;
}
/* ヘッダー */
#contents_header {
	position: relative;
}
/* 検索窓 */
#searchbox {
    position: relative;
	position: -webkit-sticky;
	position: sticky;
	top: -76px;
	left: 0px;
	padding: 4px;
	z-index: 8;
}
/* IEのみ */
@media all and (-ms-high-contrast: none){
	#searchbox{
		top: 0px;
	}
}
#wrapper{
	margin-top:10px;
}

#footer{
	clear:both;
	text-align:center;
}
#footer #BtmCopyRight1{
	text-align:center;
}

#left_menu{
	width:20%;
	display:block;
	float:left;
}
#right_menu {
	width: 25%;
	max-width: 200px;
	float: right;
	display: block;
	box-sizing: border-box;
}
#main_menu{
	float: right;
	width: 80%;
	display:block;
	margin:0px 0px;
	padding: 0px 10px;
	box-sizing: border-box;
}
#products {
	width: 75%;
	margin: 5px auto;
	float: left;
	padding: 0px 6px;
	box-sizing: border-box;
}
#information{
	width: 75%;
}
#calendar{
	float:left;
	display:block;
	width:20%;
	padding: 0;
	margin:0 0 10px 0;
	text-align:center;
	box-sizing: border-box;
	clear: left;
}

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

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

a:visited{
	border:none;
	text-decoration:none;
	color:#0077d2;
}

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

/* 汎用
............................................................... */
.contentheader{
	padding:3px;
	color:#393939;
	font-size:100%;
	font-weight:bold;
	border-bottom:#ff9900 3px solid;
	background-color: #ffffff;
}
.clearfloat{
	clear:both;
	height:0;
	font-size:1px;
	line-height:0px;
}

/* iframe */
.iframe{
	border: 0px;
	margin: 0px;
	overflow: hidden;
	vertical-align: bottom;
}

/* スクロールボタン */
#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 {
	position: relative;
	top: 50%;
	transform: translate(0%,-50%);
	font-size: 150%;
	content: "▲";
	display: block;
	text-align: center;
	width: 100%;
	margin: auto;
}

/* コンテンツ部分 → 左メニュー
............................................................... */
/* ハンバーガーメニュー */
.hbg_menu_btn {
	display:none;
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	right: 0;
	top: 0;
	z-index: 6;
}
.hbg_menu_btn_inner {
	position: absolute;
	right: 10px;
	top: 6px;
	width: 14vmin;
	height: 14vmin;
	color: #ffffff;
	background-color: #ffffff;
	border: 1px solid #999999;
	box-sizing: border-box;
	cursor: pointer;
	opacity: 1;
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	background-image:url(/gold/amiami/images/parts/icon_hbg.png);
	background-size:contain;
	pointer-events: auto;
}

/* レフトメニュー（ドロワーメニュー） */
.hbg_menu_area{
	display:none;
}

/* レフトメニュー挿絵（ドロワーメニュー） */
.drawer_back {
	display:none;
	position: fixed;
	height: 100%;
	z-index: 11;
	width: 87vw;
	min-width: 87vw;
	background-position: bottom center;
	background-image: url(/gold/amiami/images/drawer_back.jpg);
	background-color: rgba(255,255,255,0.25);
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-ms-background-size: contain;
	-webkit-transform: translate3d(0,0,0);
	transition: left 0.3s ease-out;
}
/* Safari対応用 */
_::-webkit-full-page-media, _:future, :root .drawer_back:before {
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width: 87vw;
	min-width: 87vw;
	height: 100%;
	background-position: bottom center;
	background-image: url(/amiami/images/drawer_back.jpg);
	background-color: rgba(255,255,255,0.25);
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	-ms-background-size: contain;
	content:"";
}
/* レフトメニュー背景（ドロワーメニュー） */
.hbg_menu_back{
	display:none;
	background-color: rgba(0,0,0,0.75);
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left:0;
	z-index: 10;
}
.hbg_menu_back:before{
	content: "×";
	text-align: right;
	position: absolute;
	right: calc(1vw + 10px);
	top: 0px;
	width: 100%;
	display: block;
	color: #ffffff;
	font-size: 10vmin;
}

/* ドロワーメニュー
............................................................... */
.navigation_menu #drawer{
	display:none;
	margin: 0;
}
.navigation_menu #drawer #drawer_genre{
    margin: 0;
}
.navigation_menu #drawer .browsenode{
	margin: 0;
}
.navigation_menu #drawer .browsenode dd ul {
    margin: 0;
    padding: 0;
    list-style:none;
}
.navigation_menu #drawer .browsenode dd {
    background-color: rgba(255,255,255,0.9);
    margin: 0;
}
.navigation_menu #drawer .browsenode dd li a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 6px;
	box-sizing: border-box;
	text-decoration: none;
}

.navigation_menu #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-color: rgba(255,255,255,0.9);
	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;
}
.navigation_menu #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;
}
.navigation_menu #drawer dt.closed:before,
.navigation_menu #drawer dt.opened:before,
.navigation_menu #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;
}
.navigation_menu #drawer dt.closed:before{content:">";transform: translateY(-50%) rotate( 90deg );}
.navigation_menu #drawer dt.opened:before{content:">";transform: translateY(-50%) rotate( -90deg );}
.navigation_menu #drawer dt.link:before{content:">";}

.navigation_menu #drawer .navi_01,
.navigation_menu #drawer .navi_02,
.navigation_menu #drawer .navi_03,
.navigation_menu #drawer .navi_04,
.navigation_menu #drawer .navi_05.
.navigation_menu #drawer .navi_06,
.navigation_menu #drawer .navi_07,
.navigation_menu #drawer .navi_08{
	background-size: contain;
	font-weight: bold;
	color: #003366;
}
.navigation_menu #drawer .navi_01:hover,
.navigation_menu #drawer .navi_02:hover,
.navigation_menu #drawer .navi_03:hover,
.navigation_menu #drawer .navi_04:hover,
.navigation_menu #drawer .navi_05:hover,
.navigation_menu #drawer .navi_06:hover,
.navigation_menu #drawer .navi_07:hover,
.navigation_menu #drawer .navi_08:hover{
    color: #ee7711;
}


/* 中央バナー
............................................................... */
.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: 600px;
	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;
}