@charset "UTF-8";

/*IE6 hack*/
* html .iepngfix {
	behavior: expression(IEPNGFIX.fix(this));
}

html {
	font-size: 62.5% !important;
}

#Wrap,
.wrapBottom,
.wrapTop {
	width: 100%;
}

div#HeaderWrap {
	position: relative;
	z-index: 999;
}

#brandListWrap a:hover {
	opacity: 0.8;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	background: none !important;
}

/* .brxLoadFade {opacity : 0; transform: translateY(10px); transition : all .5s ease-in-out;}
.brxLoadFade.done {opacity : 1; transform : translate(0, 0);}
.brxScrollFade {opacity: 0; transform: translateY(10px); transition: all .5s ease-in-out;}
.brxScrollFade.done {opacity : 1; transform : translate(0, 0);} */

#brandListWrap .brandTitle h1,
#brandListWrap .brandTitle h3 {
	color: #053931;
	font-family: pragmatica, sans-serif;
	font-weight: 200;
	font-style: normal;
	line-height: 1;
	text-align: center;
}

#brandListWrap .brandTitle p {
	color: #053931;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	letter-spacing: .01em;
	text-align: center;
}

#brandListWrap .brandHeadTextBorder {
	position: relative;
	width: 100%;
}

#brandListWrap .brandHeadText p {
	color: #053931;
	font-family: pragmatica, sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height: 1;
}

#brandListWrap .brandDetail .brandLogo img {
	width: 100%;
}

#brandListWrap .brandDetail .brandLogo .img {
	width: 28rem;
	height: 14rem;
}

#brandListWrap .brandDetail .brandLogo .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#brandListWrap .brandDetail h4 {
	color: #053931;
	font-family: pragmatica, 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

#brandListWrap .brandDetail h4 span:nth-of-type(2) {
	letter-spacing: .01em;
}

#brandListWrap .brandDetail .brandDetailText {
	color: #053931;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 300;
	letter-spacing: .01em;
}

#brandListWrap .brandDetail .moreBtn {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
	letter-spacing: .01em;
}

#brandListWrap .brandDetail .moreBtn a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #053931;
	text-align: center;
	border: 1px solid #053931;
	border-radius: 30px;
}

#brandListWrap .brandDetail .moreBtn a:hover {
	color: #fff;
	background-color: #053931 !important;
	opacity: 1 !important;
	;
}


/* 20211220更新 */
.brandLogo {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brandLogo .logo {
	width: 30%;
	margin: 0 auto;
}

.brandLogo .logo.md {
	width: 20%;
}


/*************************************SP****************************************/
@media screen and (max-width:768px) {

	#brandListWrap {
		position: relative;
		margin: 0 auto calc(160*(100vw/586));
	}

	#brandListWrap .brandTitle {
		display: none;
	}

	.breadcrumbs {
		display: none !important;
	}

	.accrodionBlock {
		display: flex;
		justify-content: center;
		position: fixed;
		top: 0;
		width: 100%;
		padding-top: calc(255*(100vw/750));
		background-color: #fffcf4;
		z-index: 100;
	}

	.accrodionBlock.scroll {
		padding-top: calc(140*(100vw/750)) !important;
	}

	#accordionMainDrop {
		position: relative;
	}

	#accordionMainDrop .accordionOpenLink {
		position: relative;
		width: calc(526*(100vw/586));
	}

	#accordionMainDrop .dropTittle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(526*(100vw/586));
		height: calc(68*(100vw/586));
		color: #fff;
		font-family: pragmatica, 'Noto Sans JP', sans-serif;
		font-size: calc(22*(100vw/586));
		letter-spacing: .01em;
		text-align: center;
		background-color: #053931;
		border-radius: 30px;
	}

	#accordionMainDrop .accordionIcon {
		position: absolute;
		right: calc(40*(100vw/586));
		width: calc(16*(100vw/586));
		height: calc(16*(100vw/586));
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		/* transition: all .2s; */
	}

	#accordionMainDrop .accordionIcon {
		top: calc(20*(100vw/586));
		transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		-o-transform: rotate(135deg);
	}

	#accordionMainDrop .accordionIcon.active {
		top: calc(30*(100vw/586));
		transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
	}

	.accordionCont {
		width: calc(526*(100vw/586));
		margin-top: calc(-40*(100vw/750));
		padding-top: calc(40*(100vw/750));
		background-color: #053931;
		border-radius: 0 0 30px 30px;
	}

	.subDrop {
		padding: calc(12*(100vw/586)) calc(46*(100vw/586)) calc(46*(100vw/586));
	}

	.listNav {
		display: flex;
		height: calc(400*(100vw/586));
		flex-wrap: wrap;
	}

	.listNav li {
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(56*(100vw/586));
		height: calc(56*(100vw/586));
		margin: 0 calc(8*(100vw/586));
		color: #053931;
		font-family: pragmatica, sans-serif;
		font-weight: 300;
		font-style: normal;
		font-size: calc(26*(100vw/586));
		background-color: #fff;
		border-radius: 5px;
	}

	.listNav li.activeLink {
		background-color: #EBFF9A !important;
	}

	.listNav li:nth-of-type(n+7) {
		margin-top: calc(16*(100vw/586));
	}

	.listNav .listOtherLink {
		width: calc(269*(100vw/586));
	}

	#brandListCon {
		margin-top: calc(120*(100vw/586));
	}

	#brandListWrap .brxLoadFade,
	#brandListWrap .brxScrollFade {
		margin-top: calc(-130*(100vw/586));
		padding-top: calc(130*(100vw/586)) !important;
		margin-bottom: calc(140*(100vw/586));
	}

	#brandListWrap .brandHeadText {
		display: flex;
	}

	#brandListWrap .brandHeadText p {
		font-size: calc(70*(100vw/586));
	}

	#brandListWrap .brandHeadTextOther {
		width: calc(500*(100vw/586));
	}

	#brandListWrap .brandHeadTextBorder {
		margin-left: calc(16*(100vw/586));
	}

	#brandListWrap .brandHeadTextBorder::before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		bottom: calc(14*(100vw/586));
		width: 100%;
		height: calc(4*(100vw/586));
		background-color: #053931;
	}

	#brandListWrap #brandListCon .listCon {
		margin-top: calc(66*(100vw/586));
	}

	#brandListWrap #brandListCon .brandDetail:nth-of-type(n+2) {
		margin-top: calc(110*(100vw/586));
	}

	#brandListWrap .brandCont {
		padding: 0 calc(50*(100vw/586));
	}

	#brandListWrap .brandDetail h4 {
		margin: calc(36*(100vw/586)) 0 calc(16*(100vw/586))
	}

	#brandListWrap .brandDetail h4 span:nth-of-type(1) {
		font-size: calc(30*(100vw/586));
	}

	#brandListWrap .brandDetail h4 span:nth-of-type(2) {
		font-size: calc(16*(100vw/586));
		margin-left: calc(14*(100vw/586));
	}

	#brandListWrap .brandDetail .brandDetailText {
		font-size: calc(18*(100vw/586));
		line-height: 1.444;
	}

	#brandListWrap .brandDetail .moreBtn a {
		width: calc(246*(100vw/586));
		height: calc(46*(100vw/586));
		margin: calc(70*(100vw/586)) auto 0;
		font-size: calc(17*(100vw/586));
	}



	/* 20211220更新 */
	.brandLogo .logo {
		width: 35%;
		margin: unset;
	}

	.brandLogo .logo.md {
		width: 28%;
	}

	#brandListWrap .brandDetail .brandLogo .img {
		width: 60%;
		height: calc(140*(100vw/586));
	}


}

/*************************************PC****************************************/
@media screen and (max-width: 1200px) and (min-width: 769px) {
	html {
		font-size: calc(10* (100vw / 1200)) !important;
	}

	#brandListCon {
		padding: 0 calc(50*(100vw/1400)) !important;
	}

	#brandListWrap #brandListCon .brandDetail {
		/* width: calc(620*(100vw/1400)) !important; */
	}
}

@media only screen and (min-width: 769px) {

	/*
	.nav-global li:nth-of-type(2) p a {
		color: #FBFF9A;
	}
*/
	.brandList_Header {
		display: none !important;
	}

	.BrandListPageOnly {
		display: flex !important;
	}

	.breadcrumbs {
		font-weight: 200 !important;
	}

	#brandListWrap {
		width: 100rem;
		margin: 0 auto 18rem;
	}

	#brandListWrap .brandTitle h1,
	#brandListWrap .brandTitle h3 {
		font-size: 6.2rem;
	}

	#brandListWrap .brandTitle p {
		font-size: 1.7rem;
	}

	.accrodionBlock {
		display: none;
	}

	#brandListWrap .brxLoadFade,
	#brandListWrap .brxScrollFade {
		margin-top: -3rem;
		padding-top: 21rem;
	}

	#brandListWrap .brandHeadText {
		display: flex;
	}

	#brandListWrap .brandHeadText p {
		font-size: 4.2rem;
	}

	#brandListWrap .brandHeadTextOther {
		width: 24rem;
	}

	#brandListWrap .brandHeadTextBorder {
		margin-left: 1.6rem;
	}

	#brandListWrap .brandHeadTextBorder::before {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		bottom: 1.2rem;
		width: 100%;
		height: .2rem;
		background-color: #053931;
	}

	#brandListWrap #brandListCon .listCon {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 11rem;
	}

	#brandListWrap #brandListCon .brandDetail {
		width: 48%;
	}

	#brandListWrap #brandListCon .brandDetail:nth-of-type(n+3) {
		margin-top: 16rem;
	}

	#brandListWrap .brandDetail h4 {
		margin: 1.6rem 0 1rem;
	}

	#brandListWrap .brandDetail h4 span:nth-of-type(1) {
		font-size: 2rem;
	}

	#brandListWrap .brandDetail h4 span:nth-of-type(2) {
		font-size: 1rem;
		margin-left: 1.5rem;
	}

	#brandListWrap .brandDetail .brandDetailText {
		font-size: 1.4rem;
		line-height: 1.5;
	}

	#brandListWrap .brandDetail .moreBtn a {
		width: 18rem;
		height: 4rem;
		margin: 3.5rem 0 0 auto;
		font-size: 1.1rem;
	}


}

.noScroll .navigation-overlay {
	z-index: 888;
}