/* ==================================================
	base
================================================== */

#main_content {
	color: #000;
	background: #fff;
}

@media screen and (max-width: 1023px) {
	#main_content {
		padding-bottom: 2rem;
	}
}

/* ==================================================
	slider
================================================== */

.slider {
	display: none;
	

}
.slider.slick-initialized {
	display: block;
}

.slick-prev,
.slick-next {
	width: 30px;
	height: 30px;
	z-index: 1;
}
.slick-prev {
	left: 0;
}
.slick-next {
	right: 0;
}
.slick-prev::before,
.slick-next::before {
	display: inline-block;
	content: "\E90c";
	transition: .2s;
	font-family: HPIcons;
	color: #767676;
	font-size: 30px;
	opacity: 1;
}
.slick-prev::before {
	transform: rotate(90deg);
}
.slick-next::before {
	transform: rotate(270deg);
}
.slick-prev:hover::before,
.slick-next:hover::before {
	opacity: .7;
}
.slider .slick-dots {
	left: 0;
}

.slider .slick-slide {
	margin-right: 15px;
}
.slider .slick-list {
	padding-right: 15%;
}

/* ==================================================
	carousel
================================================== */

/*@media screen and (max-width: 1023px) {
	.carousel .carousel_arrow {
		border-color: #767676;
	}
	.carousel .slick-dots li button:hover:before,
	.carousel .slick-dots li button:focus:before,
	.carousel .slick-dots li.slick-active button:before {
		background: #000;
	}
}

@media screen and (min-width: 1024px) {
	.carousel {
		padding: 5px 5px 0;
	}
	.navi_left .carousel_navi {
		width: 185px;
	}
	.navi_left .carousel_navi .slick-track {
		width: 185px !important;
	}
	.navi_left .carousel_navi_btn {
		width: 185px !important;
		padding: 0 5px;
	}
	.navi_left .carousel_navi_btn.slick-current {
		background: #fff;
	}
	.navi_left .carousel_navi_btn::after {
		box-shadow: 0 0 0 1px #ccc inset;
	}
	.navi_left .carousel_navi_btn:hover::after,
	.navi_left .carousel_navi_btn.slick-current::after {
		box-shadow: 0 0 0 2px red inset;
	}
	.navi_left .carousel_navi_btn.slick-current::before {
		border-color: transparent red transparent transparent;
	}
	.navi_left .carousel_navi_title {
		color: #000;
	}
	.navi_left .carousel_navi_text {
		color: #767676;
	}
}*/





/* ==================================================
	cate_content
================================================== */

#cate_content {
	padding: 2rem 0;
}
#cate_content h2.hLine {
	color: #000;
	font-size: 1.8rem;
}
#cate_content .hLine span::before,
#cate_content .hLine span::after {
	border-color: #000;
}

@media screen and (min-width: 1024px) {
	#cate_content {
		padding: 40px;
	}
	#cate_content h2.hLine {
		font-size: 20px;
		letter-spacing: 5px;
	}
}





/* ==================================================
	info
================================================== */

.info_list > li {
	padding: 1.5rem 0;
	text-align: center;
	border-bottom: 1px solid #333;
}
.info_bnr .outline {
	display: inline-block;
	position: relative;
}
.info_bnr .outline a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-shadow: 0 0 0 1px #333 inset;
}
.info_text {
	margin-top: 1rem;
}
.info_text h3 {
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.5;
}
.info_text p {
	margin-top: .5rem;
	color: #ccc;
	font-size: 1.3rem;
}
.info_text .button {
	margin-top: 1rem;
}

@media screen and (min-width: 480px) {
	.info_list > li {
		display: flex;
		justify-content: space-between;
		text-align: left;
	}
	.info_bnr,
	.info_text {
		width: 48%;
	}
	.info_text {
		margin-top: 0;
	}
}

@media screen and (min-width: 1024px) {
	.info_list > li {
		padding: 40px 0;
	}
	.info_bnr {
		width: 390px;
	}
	.info_text {
		width: 490px;
	}
	.info_text h3 {
		font-size: 20px;
	}
	.info_text p {
		margin-top: 10px;
		font-size: 14px;
	}
	.info_text .button {
		margin-top: 15px;
	}
}





/* ==================================================
	twitter
================================================== */

.twitter_area {
	margin-top: 1.5rem;
}

@media screen and (min-width: 1024px) {
	.twitter_area {
		width: 660px;
		margin: 20px auto 0;
	}
}



/* ----------------------------------------
	twitter widget
---------------------------------------- */

@media screen and (max-width: 768px) and (min-width: 480px) {
	iframe .twitter-timeline-rendered{
		width: 490px !important;
	}
}

@media screen and (max-width: 480px) {
	iframe.twitter-timeline-rendered {
		width: 450px !important;
		margin: 0 auto;
	}
}

.timeline-Widget {
	max-width: 300px !important;
	width: 200px !important;
}





/* ==================================================
	map - SP  : vr202108
================================================== */


.map_sp_pc .acco_content {
	padding: 1.2rem;
}
.map_sp_pc .acco_basic .acco_trigger {
	background: #000;
	color: #fff;
}
.map_sp_pc .acco_content h3 {
	padding: .2em 0 .2em 10px;
	border-left: 5px solid #000;
	color: #000;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 1px;
}
.map_list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
	padding: 0;
}
.map_list > li {
	width: 50%;
	padding: .4rem;
}
.map_list > li img {
	width: 100%;
}

@media screen and (min-width: 480px) {
	.map_list > li {
		width: 33.33333%;
	}
}

@media screen and (min-width: 768px) {
	.map_list > li {
		width: 25%;
	}
}

@media screen and (max-width: 1023px) {
	.prod_cover {
		position: relative;
	}
	#desk .map_list > li:hover,#note .map_list > li:hover {
		opacity: .7;
		transition: .2s;
	}
	.prod_contents {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.prod_contents a {
		display: block;
		width: 100%;
		height: 100%;
	}
	.prod_contents img {
		display: none;
	}
}
@media screen and (min-width: 1024px) {
/*	.map_sp_pc {
		display: block;
	}*/
	.map_sp_pc .acco_content {
		border: 1px solid #000;
	}
	/*.map_sp_pc .acco_mobile.acco_basic > div {
		display: flex;
		margin-top: 10px;
	}
	.map_sp_pc .acco_mobile .acco_content {
		width: 100%;
	}*/
	/*.map_list > li {
		width: 204px;
	}*/
	.map_list > li {
		padding: 8px;
	}
	.map_sp_pc .acco_basic .acco_trigger.acco_open::after,.map_sp_pc .acco_cyan .acco_trigger.acco_open::after {
		content: none;
	}
	.map_sp_pc .acco_trigger {
		margin-top: 5px;
		padding: 10px;
		/*width: 40px;
		display: flex;
		align-items: center;
		word-wrap:break-word;*/
		border-radius: 4px 4px 0 0;
		font-size: 13px;
		text-align: center;
	}
/*	.map_sp_pc .acco_basic .acco_trigger.note {
		background: #333;
		color: #fff;
	}*/
	.prod_btn{
		display: block;
	}
	.prod_contents {
		display: none;
		position: absolute;
		z-index: 100;
		left: -20px;
		right: -20px;
		top: -20px;
		border-top-right-radius: 3px;
		border-bottom-left-radius: 3px;
		background: #fff;
		box-shadow: 0 0 5px rgba(0,0,0,.2);
	}
	.prod_contents img {
		max-width: 250px;
		opacity: 1 !important;
	}
	.prod_cover {
		position: relative;
		float: left;
		padding:0;
		width: auto;
		height: auto;
	}
	.prod_btn {
		position: relative;
		z-index: 80;
	}
}





/* ==================================================
	keyword_list (2021.06.17)
================================================== */

.keyword_list {
	display: flex;
	flex-wrap: wrap;
}
.keyword_list > li {
	width: 100%;
	margin-top: 10px;
}
.keyword_list > li > a {
	color: #000;
	position: relative;
	padding: 0 0 0 2em;
}
.keyword_list > li > a::before {
	content: "";
	position: absolute;
	background: url(images/mask.svg)no-repeat;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background-size: contain;
}

@media screen and (min-width: 480px) {
	.keyword_list > li {
		width: 50%;
	}
}

@media screen and (min-width: 768px) {
	.keyword_list > li > a {
		font-size: 15px;
	}
}

@media screen and (min-width: 1024px) {
	.keyword_list {
		margin: 0 -10px;
	}
	.keyword_list > li > a {
		display: block;
		margin: 20px 10px 0;
		padding: .8em .8em .8em .8em;
		text-align: center;
		line-height: 1.4;
		border: 1px solid #000;
		border-radius: 4px;
		transition: .2s;
	}
	.keyword_list > li > a::before {
		left: .6em;
	}
	.keyword_list > li > a:hover {
		color: #a91b29;
		background: #f2f2f2;
		text-decoration: none;
	}
	.keyword_list > li > a::after {
		content: "\E90c";
		position: absolute;
		top: 50%;
		right: .6em;
		transform: translateY(-50%) rotate(270deg);
		font-family: HPIcons;
	}
	.keyword_list > li {
		width: 33.33333%;
	}
}