@charset "UTF-8";

/* ////////////////////////////////////////////////
# PRODUCTS 各種一覧ページ /products/
//////////////////////////////////////////////// */
.l-page-sec__in{
	padding-bottom: 0;
}
.card-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	max-width: 830px;
	margin: 0 auto;
}
.card{
	/* content: ""; */
	background: #333;
	transition: 0.15s ease;
    max-width: 410px;
	height: 220px;
	display: block;
}
@media (hover: hover) {
	.card:hover{
		transform: translateY(-3px);
		opacity: .8;
	}
}

.card a{
	position: relative;
	display: block;
	color:#fff;
	text-align: right;
	width: 100%;
	height: 220px;
	/* padding-top: 40px; */
	/* padding-bottom: 20px; */

}
.products-card .cat-text{
	position: relative;
	display: block;
}
.products-card .lead-text{
	font-size: 12px;
	display: block;
	margin-top: 16px;
	padding-right: 16px;
	padding-left: 38px;
	text-align: left;
	line-height: 2;
}
.products-card .cat-text img{
	width: 223px;
	height: 42px;
}
.card:nth-of-type(1) .cat-text::after{
	background: url(../images/products/card_cat01.png)no-repeat center center/contain;
}
.card:nth-of-type(1){
	background: url(../images/products/products_card01.jpg)no-repeat left center/cover;
}
.card:nth-of-type(2){
	background: url(../images/products/products_card02.jpg)no-repeat left center/cover;
}
.card:nth-of-type(3){
	background: url(../images/products/products_card03.jpg)no-repeat left center/cover;
}
.card:nth-of-type(4){
	background: url(../images/products/products_card04.jpg)no-repeat left center/cover;
}
.card:nth-of-type(5){
	background: url(../images/products/products_card05.jpg)no-repeat left center/cover;
}
.card:nth-of-type(6){
	background: url(../images/products/products_card06.jpg)no-repeat left center/cover;
}
.card:nth-of-type(7){
	background: url(../images/products/products_card07.jpg)no-repeat left center/cover;
}
.card:nth-of-type(8){
	background: url(../images/products/products_card08.jpg)no-repeat left center/cover;
}
.link-text{
	position: absolute;
	display: block;
	font-size: 12px;
	font-weight: 400;
	padding-right: 15px;
	margin-top: auto;
	margin-right: 16px;
	right: 0;
	bottom: 20px;
}
.link-text::after {
    content: '';
    display: block;
    width: 7px;
    height: 12px;
    background: url(../images/arrow_news.png)no-repeat top center / contain;
    position: absolute;
    top: 4px;
    right: 0;
}
.card-text__wrap {
    position: absolute;
    width: 223px;
    /* margin-left: auto; */
	display: flex;
	flex-direction: column;
	top: 40px;
	right: 0;
}

@media screen and (max-width: 767px) {
	/* SP1列 */
	.card-grid{
		grid-template-columns:1fr;
		justify-items: center;
	}
	.card{
		width: auto;
		height: calc(320/750*100vw);
		aspect-ratio: 670/320;
		max-width: 100%;
	}
	.products-card .cat-text img{
		width: 193px;
		height: 30px;
	}
	.card:nth-of-type(1){
		background: url(../images/products/products_card01_sp.jpg)no-repeat left center/cover;
	}
	.card:nth-of-type(2){
		background: url(../images/products/products_card02_sp.jpg)no-repeat left center/cover;
	}
	.card:nth-of-type(3){
		background: url(../images/products/products_card03_sp.jpg)no-repeat left center/cover;
	}
	.card:nth-of-type(4){
		background: url(../images/products/products_card04_sp.jpg)no-repeat left center/cover;
	}
	.card:nth-of-type(5){
		background: url(../images/products/products_card05_sp.jpg)no-repeat left center/cover;
	}
	.card:nth-of-type(6){
		background: url(../images/products/products_card06_sp.jpg)no-repeat left center/cover;
	}
	.card:nth-of-type(7){
		background: url(../images/products/products_card07_sp.jpg)no-repeat left center/cover;
	}
	.card:nth-of-type(8){
		background: url(../images/products/products_card08_sp.jpg)no-repeat left center/cover;
	}
	.card a {
		height: 100%;
	}
	.card-text__wrap {
		width: 193px;
		top: 22px;
	}
	.link-text {
		padding-right: 10px;
		line-height: 1.6;
		bottom: 15px;
	}
	.products-card .lead-text{
		display: block;
		margin-top: 13px;
		padding-right: 15px;
		padding-left: 20px;
		line-height: 1.6;
	}
	#products .l-page-sec__in{
		padding: 0;
	}
	.products__content {
		margin-bottom: 180px;
	}

}


/* ////////////////////////////////////////////////
# PRODUCTS 種別TOPページ /products/xxxxx/
//////////////////////////////////////////////// */
.products-main__header{
	display: flex;
	margin-bottom: 50px;
}
.products-main-title{
	color: var( --main-color);
	flex-shrink: 0;
	font-size: 18px;
	font-weight: bold;
}
.products__content{
	margin-bottom: 20px;
}
.products-main-text{
	font-size: 12px;
	line-height: 2;
}
.products-main-desc{
	border-left: 1px solid #000;
	margin-left: 40px;
	padding-left: 40px;
}
.productCategoryArea {
	max-width: unset;
	margin: auto;
}
.productName{
	background: var(--main-color);
	font-size: 14px;
	font-weight: bold;
	text-align: left;
	padding: 0 18px;
	height: 42px;
	line-height: 42px;
	position: relative;
}
.productName::after{
	content: '';
	display: block;
	background: url(../images/arrow_next_single_white.png)no-repeat center top / contain;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 12px;
	width: 7px;
	height: 13px;
}

.cateList{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cateList li {
	background: #fff;
	float: left;
	display: block;
	margin-bottom: 0;
	/* width: 33%; */
	width: calc((100% - 20px)/3);
	transition: 0.15s ease;
}
@media (hover: hover) {
	.cateList li:hover{
		transform: translateY(-3px);
		box-shadow: 0 8px 18px rgba(0,0,0,0.12);
	}
}

@media screen and (max-width: 767px) {
	.cateList li {
    width: calc((100% - 10px)/2);
	}
	.products-main-text{
		line-height: 1.6;
	}
}


/* 製品情報 ヘッダーナビ*/
.l-page-sec--l .l-page-sec__in {
	padding-top: 36px;
}
.products-nav ul,
.products-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.products-nav li{
	width: calc(100%/8);
	text-align: center;
	margin: 0 calc(5/1366*100vw);
}
.products-nav a {
	text-decoration: none;
	color: #000;
}
.products-nav ul {
	display: flex;
	justify-content: center;
	border-bottom: 1px solid var(--gray-color);
	padding-bottom: 6px;
}
.products-nav a {
	display: block;
	font-size: clamp(10px, 0.878477306%, 12px);
	font-weight: bold;
	padding: 8px calc(8/1366*100vw);
	transition: background .2s;
	font-feature-settings: "palt";
	font-weight: bold;
}
@media  (min-width: 1367px) {
	.products-nav a {
		padding: 8px 8px;
	}
	.products-nav li{
		margin: 0 5px;
	}
}
@media (hover: hover){
	.products-nav a:hover {
		background: var(--main-color);
		color: #fff !important;
		opacity: 1;
	}
}

.products-nav a.is-current {
	position: relative;
	color: var(--main-color);
}
.products-nav a.is-current::after{
	content: '';
	display: block;
	background: var(--main-color);
	width: 110%;
	height: 3px;
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
	.l-page-sec__in{
		padding: 30px 0;
	}
	.content{
		position: relative;
	}
	#products-nav{
		position: absolute;
		bottom: 104px;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		padding: 0 5%;
	}
	#products-nav
	.products-nav ul{
		flex-wrap: wrap;
		justify-content: initial;
	}
	.products-nav li {
    width: calc(100%/3);
    text-align: center;
		border-bottom: 1px solid #ccc;
		margin: 0;
	}
	.products-nav ul{
		border-bottom: 0;
	}
	.products-nav a.is-current::after {
    height: 2px;
	bottom: -1px;
	}
	.products-nav a {
		font-size: 12px;
		padding: 15px 8px;
	}
	.l-page-sec--l .l-page-sec__in {
		padding-bottom: 0;
		max-width: 100%;
	}


	.products-main__header {
		flex-direction: column;
    margin-bottom: 40px;
	}
	.products-main-title{
		font-size: 15px;
		margin-bottom: 10px;
	}
	.products-main-desc {
		border-left: 0;
    border-top: 1px solid #000;
    margin-left: 0;
    padding-left: 0;
		padding-top: 20px;
	}
	.productName {
    font-size: 12px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
	font-feature-settings: 'palt';
	}

	#products-content .products__content,
	#products-detail .products__content{
		margin-bottom: 0;
		padding-bottom: 180px;
	}
	#products-item .l-page-sec__in{
		padding-bottom: 0;
	}
}


/* ////////////////////////////////////////////////
# 商品詳細ページ /products/hera/XXXX/
//////////////////////////////////////////////// */
.productDetailArea {
	margin: auto;
	padding-top: 10px;
	width: 100%;
}
@media (min-width: 768px){
	.productSlider{
		position: relative;
		/* max-width: 400px; */
		max-width: calc(400/830*100%);
		min-height: 400px;
		width: 100%;
		overflow: unset;
		float: unset;
	}
	.productSlider .itemDetail{
		width: auto;
	}
	.slide-desc{
		display: flex;
		flex-direction: column;
		max-width: 400px;
		width: 100%;
		margin-top: -100%;
		margin-left: 110%;
		/* float: left; */
		clear: left;

	}
	.bx-wrapper {
		margin-bottom: 0;
	}
	
}

.slideThum li .slideThumWrap{
	position: relative;
	width: 60px;
	height: 60px;
	background: unset;
}
.slideThum li.stay .slideThumWrap::after{
	content: '';
	display: block;
	width: 93%;
	height: 93%;
	border: 2px solid var(--main-color);
	position: absolute;
	top: 0;
	left: 0;
}
.slideThum li.stay img {
    opacity: 1;
	height: 100% !important;
}


.itemName{
	color: var(--main-color);
	font-weight: 700;
	margin-bottom: 30px;
}
.itemExp{
	margin-bottom: 28px;
	line-height: 2;
}
.bl_material{
	margin-bottom: 32px;
}
.bl_material th, td{
	font-size: 12px;
}
.bl_material th{
	background: #efefe7;
	padding: 12px 20px;
}
.bl_material td{
	background: #f7f8f1;
	padding: 12px 20px;
}
.slide-desc{
	display: flex;
	flex-direction: column;
}
.slideThum{
	width: unset;
}
.slideThum-wrap{
	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
}
.slideThum li {
	background-size: 60px 60px;
	float: unset;
	font-size: 11px;
	font-weight: bold;
	overflow: hidden;
	width: 60px;
	min-height: 94px;
	margin-right: unset;
	margin-bottom: unset;
}
.slideThum li a {
	display: block;
	width: 100%;
}

.itemSpec{
	margin-top: 50px;
	margin-bottom: 40px;
}
.itemSpec th {
	background: #fff;
	font-weight: normal;
	padding: 13px;
	text-align: left;
	font-weight: bold;
	font-size: 12px;
}
.itemSpec tr:nth-child(odd) {
	background: unset;
}
.itemSpec tr:nth-child(even) {
	background: #f5f5f5;
}
.itemSpec td {
	padding: 13px;
	text-align: left;
	font-size: 12px;
}
.itemSpec th:first-of-type,
.itemSpec td:first-of-type{
	padding-left: 53px;
}

/* 購入ボタン */
td {
	position: relative; 
}
/* .popup-container {
	display: none;
	position: absolute;
	bottom: -180px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	padding: 20px;
	width: 120px;
} */
.popup-container {
	display: none;
	position: absolute;
	top: 55px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	width: max-content;
	min-width: 160px;
}
.popup-container.active {
	display: block;
}
.popup-content{
	position: relative;
}
/* .popup-content::before{
	content: '';
	display: block;
	background: url(../images/products/bg_popup.png)no-repeat center top / contain;
	position: absolute;
	top: -30px;
	left: -20px;
	width: 160px;
	height: 185px;
	z-index: 0;
	filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.3));
} */
.popup-content{
	padding: 20px;
	filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.3));

}
.popup-content::before{
	content: '';
	display: block;
	background: #fff;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.popup-content::after{
	content: ' ';
	width: 0;
	height: 0;
	position: absolute;
	border: 12px solid transparent;
	border-bottom-color: #fff;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
}
.popup-content ul {
	list-style: none;
	padding: 0;
	z-index: 2;
	position: relative;
}
.popup-content a {
	display: block;
	padding: 5px 13px;
	color: #fff;
	border: 1px solid #eee;
	font-weight: 700;
	text-shadow: 0.1px 0 0.1px currentColor;
}
.popup-content li {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
}
.popup-content li + li{
	margin-top: 5px;
}
.popup-content .yodobashi a{
	background: #ff3c00;
}
.popup-content .aunworks a{
	background: #16365c;
}
.popup-content .askul a{
	background: #172397;
}
.popup-content .amazon a{
	background: #fff;
	border: 1px solid #000;
	color: #000;
}
.popup-content .monotarou a{
	background: #ce0e1b;
}
.popup-content .orangebook a{
	background: #ff8429;
}
.popup-content  .biccamera a{
	background: #e80012;
}
.popup-content a:hover {
	filter: brightness(1.2);
}
.buy-button {
	text-align: center;
	width: 105px;
	height: 25px;
	border: 1px solid #e2e2d9;
	background: #fff;
	color: var(--main-color);
	cursor: pointer;
	position: relative;
	font-size: 11px;
	letter-spacing: 0;
	letter-spacing: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.ico-cart{
	width: 16px;
	height: 14px;
	margin-left: 5px;
}

@media (min-width: 768px){
	.itemSpec-sp{
		display: none;
	}
}
@media screen and (max-width: 767px) {
	.productDetailArea {
    padding-top: 0;
	}
	.productSlider {
    align-items: center !important;
		flex-direction: column;
    gap: 32px;
	}
	.slide-desc {
    flex-direction: column-reverse;
	}
	#slideThum {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	gap: calc(15/750*100vw);
	}
	.slideThum li {
		/* background-size: 50px 50px; */
		/* width: 50px; */
		min-height: 80px;
		height: auto;
		font-size: 10px;
		background-size: calc(100/750*100vw)calc(100/750*100vw);
		width: calc(100/750*100vw);
	}
	.slideThum li .slideThumWrap {
		/* width: 50px;
		height: 50px; */
		width: calc(100/750*100vw);
		height: calc(100/750*100vw);
		position: relative;
	}
	.slideThum li img {
		width: auto !important;
		/* height: 50px !important; */
		height: calc(100/750*100vw) !important;
		max-width: unset !important;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		margin-left: unset !important;
	}
	.slideThum li.stay .slideThumWrap::after{
		width: 96%;
		height: 96%;
		border: calc(4/750*100vw) solid var(--main-color);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.thumCap{
		width: 100%;
	}
	.itemName {
    font-size: 15px;
		margin-bottom: 19px;
	}
	.itemExp{
		font-size: 12px;
		line-height: 1.6;
	}
	.bl_material{
		margin-bottom: 0;
	}
	.itemSpec {
    margin-top: 60px;
    margin-bottom: 47px;
	}

	/* sp */
	.itemSpec{
	}
	.itemSpec-pc{
		display: none;
	}
	.bl_itemSpec{
		position: relative;
	}
	.bl_itemSpec::before{
		content: '';
		display: block;
		background: #000;
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		height: 1px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.bl_itemSpec:last-of-type:after{
		content: '';
		display: block;
		background: #000;
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		height: 1px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.itemSpec__in{
		position: relative;
		padding: 13px 0 20px;
	}
	.bl_itemSpec:nth-child(odd) .itemSpec__in::before {
		content: '';
		display: block;
		background: #f5f5f5;
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.bl_itemSpec table {
		border-collapse: separate;
		border-spacing: 2px;
	}

	.itemSpec-sp .block{
		display: flex;
		justify-content: space-between;
		margin-bottom: 13px;
		position: relative;
		align-items: center;
	}
	.size__wrap{
		display: flex;
		gap: 35px;
	}
	.block .size-head{
		font-weight: bold;
		font-size: 12px;
	}
	.block .size{
		font-size: 12px;
	}
	.itemSpec table{
		position: relative;
		z-index: 1;
	}
	.itemSpec tr:nth-child(even) {
    background: unset;
	}
	.itemSpec th{
		background: #e5e5e5;
		padding: 6px;
		text-align: center;
	}
	.itemSpec td{
		padding: 6px;
	}
	.itemSpec th:first-of-type, .itemSpec td:first-of-type {
    padding-left: 15px;
	}
	.buy-button{
		height: 28px;
	}
	
	.popup-container {
		display: none;
		position: absolute;
		bottom: unset;
		left: unset;
		transform: unset;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 125px;
		z-index: 1000;
		max-width: 200px;
	}
	.popup-content::before{
		content: '';
		display: block;
		background: #fff;
		border-radius: 5px;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
	.popup-content::after{
		content: ' ';
		width:0;
		height: 0;
		position:absolute;
		border:12px solid transparent;
		border-left-color:#fff;
		inset: 0;
		top: 50%;
		left: 100%;
		transform: translateY(-50%);
	}

	.productSlider .bx-wrapper{
		margin-bottom: calc(61/750*100vw);
	}
	.productSlider-wrap--sp{
		margin-inline:  calc(65/750*100vw);
	}
	.bl_material th,.bl_material td {
		padding: 12px 16px;
	}


	/* scroll */
    .bl_scroll {
		white-space: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }
    .bl_scroll .scroll-wrap {
        max-width: 100%;
        min-width: calc(640 / 375 * 100%);
        vertical-align: top;
    }
}


/* 使用例 */
.howto {
    float: unset;
	margin: unset;
    width: 100%;
}
.howto-head{
	font-size: 16px;
	font-weight: 700;
	text-shadow: 0.1px 0 0.1px currentColor;
	border-bottom: 1px solid #000;
	line-height: 1;
	padding-bottom: 10px;
	margin: 0 0 20px;
}
.howto-item{
	display: flex;
}
.howtoCaption-head{
    font-size: 12px;
	font-weight: 700;
	text-shadow: 0.1px 0 0.1px currentColor;
}
.howtoCaption {
    font-size: 12px;
    margin-top: 14px;
    width: 100%;
}
.howto-text{
	background: #f7f7f2;
	padding: 22px 34px;
	border-left: 3px solid #fff;
    width: 100%;
}
.howtoImg{
	width: 180px;
	flex-shrink: 0;
	display: flex;
}
.howtoImg img{
	object-fit:cover;
	margin: 0;
}
.howto-item + .howto-item{
	margin-top: 10px;
}
@media screen and (max-width: 767px){
	.howto{
		margin-bottom: 150px;
	}
	.howto-head {
		font-size: 15px;
		padding-bottom: 9px;
		margin: 0 0 20px;
	}
	.howto-item--wrap{
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.howto-item + .howto-item {
		margin-top: 0;
	}
	.howto-item{
		flex-direction: column;
		width: calc((100% - 10px)/2);
	}
	.howtoImg{
		width: 100%;
	}
	.howto-text {
		padding: 20px 10px;
		border-left: 0;
		border-top: 3px solid #fff;
		width: 100%;
		line-height: 1.6;
	}

}