@charset "utf-8";

/* ECHELON Common Styles
   Copyright F.E. TRADE CO.,LTD All Rights Reserved.
   Since: 2024-04-17
   Modified: 2024-04-23
*/

/* -----------------------------------
   Reset styles
----------------------------------- */
html {
	font-size: inherit!important;
}
@media screen and (min-width: 769px) {
	#col-main-one,#col-main {
		width: 900px;
		padding-left: 0;
	}
}
@media screen and (max-width: 768px) {
	.page-b-in {padding: 0;}
}


.ec-searchnavRole .ec-categoryRole__contents-description {
  margin-top: 0 !important;
}

h1 {
  visibility: hidden;
  display: none;
}

.ec-headerTitle__title h1{
    visibility: inherit !important;
    display: block;
}

/* -----------------------------------
   Pseudo styles
----------------------------------- */
.echelon-nav {
	display: flex;
	gap: 60px;
	align-items: center;
	margin: 50px auto;
	padding: 0 30px 1.25rem;
	border-bottom: 2px solid #002b69;
}
.echelon-nav h2 {
	width: 152px;
	height: 15px;
	margin: 0;
}
.echelon-nav h2 img {
	width: 100%;
	height: auto;
}
.echelon-nav ul {
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	align-content: center;
}
.echelon-nav ul li {
	font-size: .8125rem;
}
.echelon-nav ul li:first-child {
}
.echelon-nav ul li a {
	display: block;
	padding: 0;
	color: #000!important;
}
.echelon-nav ul li a.active {
	color: #042B69;
}

/* ONLY PC SITE */
@media screen and (min-width: 769px) {
	.echelon-nav-openbtn {display: none;}
}

/* ONLY SP SITE */
@media screen and (max-width: 768px) {
	.page-h {display: none;}
	.echelon-nav {
		position: relative;
		flex-direction: column;
		gap: 0;
		margin: 0 auto 50px;
		padding: 0;
	}
	.echelon-nav * {
		width: 100%;
	}
	.echelon-nav h2 {
		padding: 1em 0;
	}
	.echelon-nav ul {
		position: absolute;
		z-index: 1;
		top: 3.5rem;
		display: flex;
		flex-direction: column;
		gap: 0;
		justify-content: space-between;
		align-content: center;
		margin: 0;
		background: rgba(255,255,255,.95);
	}
	.echelon-nav ul li {
		border-left: 0;
		border-bottom: 1px solid #000;
	}
	.echelon-nav ul li:first-child {
		border-top: 0;
	}
	.echelon-nav ul li a {
		padding: 1rem;
		font-weight: normal!important
	}
	.echelon-nav-openbtn {
		position: absolute;
		z-index: 1;
		display: flex;
		align-items: center;
		top: 55%;
		right: 2.5vw;
		margin-bottom:2.25vw;
		margin-right:2px;
		padding: 2.5vw;
	}
	.echelon-nav-openbtn .echelon-nav-openbtn-title {
		margin-right: 2vw;
	}
	.echelon-nav-openbtn .echelon-nav-openbtn-inner {
		width:10vw;
		height:3vw;
	}
	.echelon-nav-openbtn.is-active .echelon-nav-openbtn-line:first-child {
		top:57%;
		transform:translate(-50%,-50%) rotate(45deg);
		transform:translate(-50%,-50%) rotate(15deg);
	}
	.echelon-nav-openbtn.is-active .echelon-nav-openbtn-line:nth-child(2) {
		opacity:0;
		top:57%;
	}
	.echelon-nav-openbtn.is-active .echelon-nav-openbtn-line:nth-child(3) {
		top:57%;
		transform:translate(-50%,-50%) rotate(135deg);
		transform:translate(-50%,-50%) rotate(-15deg);
	}
	.echelon-nav-openbtn-line {
		background-color:#8b8b8b;
		right:1px;
		left:50%;
		position:absolute;
		top:50%;
		transform:translate(-50%,-50%);
		/*transition:all .5s cubic-bezier(.215,.61,.355,1);*/
		width:10vw;
		height: 1px;
		z-index:0
	}
	.echelon-nav-openbtn-line:first-child {
		top:40%;
	}
	.echelon-nav-openbtn-line:nth-child(2) {
		top:57%;
		width: 7.5vw;
	}
	.echelon-nav-openbtn-line:nth-child(3) {
		top:74%;
	}
}

/* -----------------------------------
   Hidden styles
----------------------------------- */
.is-hide {
	display: none;
}
@media screen and (min-width: 769px) {
	.is-sp {display: none;}
}
@media screen and (max-width: 768px) {
	.is-pc {display: none;}	
}

/* -----------------------------------
   Common header navigation styles
----------------------------------- */
/* ONLY PC SITE */
@media screen and (min-width: 769px) {
	.echelon-content {
		margin-top: 2px;
	}
	.echelon-content .un_header {
	  align-items:center;
	  background-color:#fff;
	  /* border-bottom:2px solid #073b74; */
	  display:flex;
	  font-size:13px;
	  justify-content:space-between;
	  line-height:1;
	  padding-bottom:20px;
	  padding-left:30px;
	  padding-top:42px;
	  position:relative;
	  z-index:10;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto 32px;
	}
	.echelon-content .un_header_logo {
	  font-size:16px
	}
	.echelon-content .un_header_logo a {
	  font-size:16px;
	  vertical-align:top
	}
	.echelon-content .un_header_logo a img {
	  vertical-align:top
	}
	.echelon-content .un_header nav ul {
	  font-size:13px;
	  list-style:none
	}
	.echelon-content .un_header nav li,
	.echelon-content .un_header nav ul {
	  align-items:center;
	  display:flex
	}
	.echelon-content .un_header nav li:after {
	  /*background-color:#000;
	  content:"";
	  display:inline-block;
	  height:13px;
	  width:1px*//* Removed at May. 13 2024 */
	}
	.echelon-content .un_header nav li:last-child:after {
	  display:none
	}
	.echelon-content .un_header nav a {
	  color:#000;
	  padding-left:29px;
	  padding-right:29px;
	  /*transition:all .5s cubic-bezier(.215,.61,.355,1)*/
	}
	.echelon-content .un_header nav a:hover {
	  opacity:1!important
	}
	.echelon-content .un_header nav a:hover {
	  color:#042b69
	}
	.echelon-content .un_header nav .logo,
	.echelon-content .un_header .un_header_toggle {
	  display: none
	}
}

/* ONLY SP SITE */
@media screen and (max-width: 768px) {
	.echelon-content {
		position: relative;
    margin-top: -60px;
		/* padding-top: 16.5vw; */
	}
	.echelon-content .un_header {
	  background-color:#fff;
	  box-sizing:border-box;
	  font-size:13px;
	  line-height:1;
	  padding-bottom:5vw;
	  padding-top:10.5vw;
	  position:absolute;
	  top:0;
	  width:100%;
	  z-index:10
	}
	.echelon-content .un_header_logo {
		position: absolute;
		top: 25%;
		left: 2.5vw;
		width: 35vw;
		padding: 2.5vw;
	}
	.echelon-content .un_header_logo a {
	}
	.echelon-content .un_header_logo a img {
	  vertical-align:top
	}
	.echelon-content .un_header .un_header_toggle {
	  align-items:center;
	  display:flex;
	  font-size:3.25vw;
	  line-height:1;
	  padding:2.5vw;
	  position:absolute;
	  right:2.5vw;
	  top:55%;
	  transform:translateY(-50%);
	  z-index:1
	}
	.echelon-content .un_header .un_header_toggle_txt {
	  color:#8b8b8b;
	  margin-right:2vw
	}
	.echelon-content .un_header .un_header_toggle_inner {
	  height:3vw;
	  position:relative;
	  width:10vw
	}
	.echelon-content .un_header .un_header_toggle_line {
	  background-color:#8b8b8b;
	  height:1px;
	  left:50%;
	  position:absolute;
	  top:50%;
	  transform:translate(-50%,-50%);
	  width:10vw;
	  will-change:transform,opacity
	}
	.echelon-content .un_header .un_header_toggle_line:first-child {
	  top:0
	}
	.echelon-content .un_header .un_header_toggle_line:nth-child(2) {
	  top:50%;
	  width:7.5vw
	}
	.echelon-content .un_header .un_header_toggle_line:nth-child(3) {
	  top:100%
	}
	.echelon-content .un_header nav {
	  background-color:#042b69;
	  height:0;
	  left:0;
	  overflow:auto;
	  position:absolute;
	  top:0;
	  width:100vw;
	  z-index:0
	}
	.echelon-content .un_header nav ul {
	  flex-direction:column;
	  flex-wrap:wrap;
	  font-size:4vw;
	  height:100vh;
	  justify-content:center;
	  line-height:2.6875;
	  list-style:none;
	  width:100vw
	}
	.echelon-content .un_header nav li,
	.echelon-content .un_header nav ul {
	  align-items:center;
	  display:flex
	}
	.echelon-content .un_header nav a {
	  color:#fff;
	  font-weight:400;
	  /*transition:all .5s cubic-bezier(.215,.61,.355,1)*/
	}
	.echelon-content .un_header nav a:hover {
	  opacity:1!important
	}
	.echelon-content .un_header nav .logo {
	  left:0;
	  line-height:0;
	  position:absolute;
	  top:50vh;
	  transform:translateY(-50%)
	}
	.echelon-content .un_header nav .logo img {
	  height:100vh;
	  vertical-align:top;
	  width:auto
	}

  #page_product_list .ec-breadcrumb__area {
    display: none !important;
  }
}

/* -----------------------------------
   Common styles
----------------------------------- */
.echelon-content-title {
	margin: 80px 0 0;
	padding: 0 0 20px;
	border-bottom: 1px solid #333;
}
.echelon-content-title h3 {
	margin: 0;
	font-size: 1.25rem;
	font-family: "Hind", sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	line-height: 1;
}
.echelon-content-title h3 span {
	display: block;
	margin-top: .5rem;
	color: #a4a4a4;
	font-size: .875rem;
}
@media screen and (max-width: 768px) {
	.echelon-content-title {
		margin: 0;
	}
	.pro-wrap .pro-block a h3 {
		color: #000;
		font-weight: normal;
	}
}