@charset "EUC-JP";
/* CSS Document */
.jumpbuttoncontainer {
	/** margin-top: 100px; 230420**/
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
ul.jumpbuttons.rightnav {
	display: flex;
	/** font-size: 2rem; 富士ホーローのページでボタンの字間がケータイで大きいので230615**/
	background-color: #ffffff;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 1em 0;
	padding: 0;
	list-style:none;
	/** border: 1px dashed rgba(0,0,0,0.25); 230623**/
}
ul.jumpbuttons.rightnav li {
	padding: 0 1em;
	/** font-feature-settings: "palt"; 230420**/
	border-left: 1px dashed rgba(0,0,0,0.25);
}
ul.jumpbuttons.rightnav li:first-child {
	border-left: none;
}
ul.jumpbuttons.rightnav.isActive {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: fixed;
	display: flex;
	max-width: 7.5vw;
	width: auto;
	margin: 0;
	top: 90px;
	left: 0;
	/** inset: 0!important;
  	justify-content: center!important; **/
	opacity: 1;
	/** transition: all 0.65s!important; **/
	z-index: 10000;
	animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
ul.jumpbuttons.rightnav.isActive li {/** 縦のナビゲーションのみに適用 **/
	font-size: 1rem;
	margin: 0 1em;
	padding: 1em 0;
	border-left: transparent;
	border-top: 1px dashed rgba(0,0,0,0.25);
	transition:all 0.3s;
}
ul.jumpbuttons.rightnav.isActive a {
	margin: 0;
}
body nav.jumpbuttoncontainer ul.jumpbuttons.rightnav.isActive a.current,
body nav.jumpbuttoncontainer ul.jumpbuttons.rightnav.isActive a:hover{
    /** 現在位置がその分類だった場合どうなるかはonly.cssで定義 **/
}

@media screen and (max-width: 768px) {
	.jumpbuttoncontainer {
		/** position: fixed; 230421**/
		top: 1rem;
		z-index: 10000;
		margin: 0;
		border-bottom: none;
	}
	ul.jumpbuttons.rightnav {
		width: 100vw;
		margin: 0;
	}
	ul.jumpbuttons.rightnav.isActive {
		writing-mode: horizontal-tb;
		max-width: none;
		top: auto;
		/** left: auto; 220325**/
		bottom: 0;
		/** inset: 0!important;
  		justify-content: center!important; **/
		/** transition: all 0.65s!important; **/
	}
	ul.isActive li {
		border: none;
		border-left: 1px dashed rgba(0,0,0,0.25);
	}
	ul.jumpbuttons.rightnav li:hover,
	ul.jumpbuttons.rightnav.isActive li:hover {
		background: transparent;
	}
	ul.jumpbuttons.rightnav li,
	ul.jumpbuttons.rightnav.isActive li {
		font-size: 0.8rem;
		/** width: 24vw; 夏特集が横3つになってしまうので230620**/
		width: 23vw;
		height: 3rem;
		/** line-height: 3rem; キッチンツール特集スマホ版でボタン内で開業する項目はずれてしまうので 230621**/
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;
		text-align: center;
		border-top: none;
	}
	ul.jumpbuttons.rightnav li:first-child,
	ul.jumpbuttons.rightnav.isActive li:first-child {
		border-left: 1px dashed rgba(0,0,0,0.25);
		border-bottom: 1px dashed rgba(0,0,0,0.25);
	}
	ul.jumpbuttons.rightnav li:nth-child(2),
	ul.jumpbuttons.rightnav.isActive li:nth-child(2) {
		border-bottom: 1px dashed rgba(0,0,0,0.25);
	}
	ul.jumpbuttons.rightnav li:nth-child(3),
	ul.jumpbuttons.rightnav.isActive li:nth-child(3) {
		border-bottom: 1px dashed rgba(0,0,0,0.25);
	}
	ul.jumpbuttons.rightnav li:nth-child(4),
	ul.jumpbuttons.rightnav.isActive li:nth-child(4) {
		border-bottom: 1px dashed rgba(0,0,0,0.25);
		border-right: 1px dashed rgba(0,0,0,0.25);
	}
	ul.jumpbuttons.rightnav li:nth-child(8),
	ul.jumpbuttons.rightnav.isActive li:nth-child(8) {
		border-right: 1px dashed rgba(0,0,0,0.25);
	}
}