@charset "utf-8";
#item {
	width: 100%;
	height: auto;
}
	.item__inner {
		width: 100%;
		height: auto;
	}
		.item__header {
			width: 100%;
			height: auto;
			padding: 0 0 0;
			position: relative;
		}
			.item__header__inner {
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
				.item_header__applicable_period {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 60px;
					background-color: var(--color--yellow);
				}
					.item_header__applicable_period__txt {
						font-size: 24px;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.03em;
						text-align: center;
						color: var(--color--black);
					}
				.item_header__txt {
					width: 100%;
					max-width: 700px;
					height: auto;
					padding: 20px 0px;
					margin: 0 auto;
				}
					.item_header__txt img {
						width: 100%;
						height: auto;
					}
		.item__contents {
			width: 80%;
			max-width: 700px;
			height: auto;
			padding: 40px 0 82px;
			margin: 0 auto;
		}
			.item__contents__note {
				width: 100%;
				height: auto;
				padding: 6px 0px;
				border-radius: 5px;
				border: solid 1px var(--color--bk_orange);
				font-size: 14px;
				font-weight: 500;
				text-align: center;
				color: var(--color--bk_orange);
			}
			.item__list {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				row-gap: 60px;
				width: 100%;
				height: auto;
				margin: 20px auto 0;
			}
				.item__item {
					width: 46.715%;
					height: auto;
				}
					.item__item__image {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: auto;
						aspect-ratio: 1 / 1;
						margin-bottom: 12px;
						border: solid 2px #E8E8E8;
					}
						.item__item__image img {
							width: 90%;
							height: 90%;
							object-fit: contain;
						}
					.item__item__details {
						width: 100%;
						height: auto;
						margin-bottom: 15px;
					}
						.item__item__maker {
							width: 100%;
							height: auto;
							margin-bottom: 1px;
							font-size: 16px;
							font-weight: 500;
							line-height: 1.5;
							letter-spacing: 0.03em;
							color: var(--color--gray);
						}
						.item__item__name {
							width: 100%;
							height: auto;
							font-size: 20px;
							font-weight: 500;
							line-height: 1.4;
							letter-spacing: 0.02em;
							color: var(--color--black);
						}
					.item__item__price {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						height: auto;
						margin-bottom: 24px;
					}
						.item__item__price__nomal {
							width: 23.547401%;
							height: auto;
							position: relative;
						}
						.item__item__price__nomal::before {
							content: '';
							display: block;
							width: 72px;
							height: 4px;
							background-color: #FF0000;
							position: absolute;
							bottom: 12px;
							left: 50%;
							transform: translate(-50%,0%) rotate(-21deg);
						}
							.item__item__price__nomal__heading {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 100%;
								height: 18px;
								margin-bottom: 4px;
								background-color: var(--color--gray);
								font-size: 10px;
								font-weight: 500;
								line-height: 1;
								letter-spacing: -0.01em;
								color: var(--color--white);
							}
							.item__item__price__nomal__details {
								width: 100%;
								height: auto;
							}
								.item__item__price__nomal__number {
									width: 100%;
									height: auto;
									padding-left: 2px;
									font-size: 10px;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0.03em;
									text-align: center;
									color: var(--color--gray);
								}
									.item__item__price__nomal__number .din {
										display: inline-block;
										margin-right: 1px;
										font-size: 20px;
										font-weight: 600;
										letter-spacing: 0.02em;
									}
								.item__item__price__nomal__tax {
									width: 100%;
									height: auto;
									font-size: 10px;
									font-weight: 500;
									line-height: 1;
									letter-spacing: 0.03em;
									text-align: center;
									color: var(--color--gray);
								}
									.item__item__price__nomal__tax .din {
										font-size: 12px;
										font-weight: 600;
									}
						.item__item__price__arrow {
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 6.5px 0 6.5px 11px;
							border-color: transparent transparent transparent #696969;
						}
						.item__item__price__discount {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 62.079511%;
							height: auto;
						}
							.item__item__price__discount__heading {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								width: 43.8%;
								height: 53px;
								padding-left: 13.5px;
								padding-bottom: 1px;
								background-color: var(--color--green);
								font-size: 14px;
								font-weight: 500;
								line-height: 19px;
								letter-spacing: -0.01em;
								color: var(--color--white);
								position: relative;
							}
								.item__item__price__discount__heading::after {
									content: '';
									display: block;
									width: 0;
									height: 0;
									border-style: solid;
									border-width: 0 18px 53px 0;
									border-color: transparent #ffffff transparent transparent;
									position: absolute;
									top: 0;
									right: 0;
									z-index: 1;
								}
							.item__item__price__discount__details {
								flex: 1;
								height: auto;
							}
								.item__item__price__discount__number {
									margin-top: -3px;
									margin-bottom: 1px;
									font-size: 20px;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0.03em;
									text-align: right;
									color: #FF0000;
								}
									.item__item__price__discount__number .din {
										margin-right: 3px;
										font-size: 36px;
										font-weight: 600;
										position: relative;
										top: 1px;
									}
								.item__item__price__discount__tax {
									font-size: 14px;
									font-weight: 500;
									line-height: 1;
									letter-spacing: 0.03em;
									text-align: right;
									color: #FF0000;
								}
									.item__item__price__discount__tax .din {
										margin-left: 4px;
										margin-right: 2px;
										font-size: 17px;
										font-weight: 600;
										position: relative;
										top: 1px;
									}
							.item__item__btn_wrap {
								width: 100%;
								height: auto;
							}
								.item__item__btn {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 100%;
									height: 62px;
									border-radius: 31px;
									background-color: var(--color--black);
									filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
									font-size: 22px;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0.03em;
									color: var(--color--white);
									position: relative;
								}
								.item__item__btn:hover,
								.item__item__btn:active {
									color: var(--color--white);
									text-decoration: none;
								}
									.item__item__btn::after {
										content: '';
										display: block;
										width: 8px;
										height: 8px;
										border-top: solid 2px var(--color--white);
										border-right: solid 2px var(--color--white);
										position: absolute;
										top: 50%;
										right: 25px;
										transform: translate(0%,-50%) rotate(45deg);
									}

#modal {
	width: 100%;
	height: auto;
}
	.modal__wrap {
		display: none;
		width: 100%;
		height: 100vh;
		height: 100svh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
		.modal__bk {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.modal__contents {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 10;
		}
			.modal__close_btn {
				width: 40px;
				height: 40px;
				border: solid 1px var(--color--white);
				position: absolute;
				top: 0;
				right: -20px;
				transform: translate(100%,0%);
				cursor: pointer;
			}
				.modal__close_btn::before,
				.modal__close_btn::after {
					content: '';
					display: block;
					width: 30px;
					height: 1px;
					background-color: var(--color--white);
					position: absolute;
					top: 50%;
					left: 50%;
				}
				.modal__close_btn::before {
					transform: translate(-50%,-50%) rotate(45deg);
				}
				.modal__close_btn::after {
					transform: translate(-50%,-50%) rotate(-45deg);
				}
			.modal__contents img {
				max-width: 85vw;
				max-height: 90vh;
			}

/* PC ================================================== */
@media all and (max-width:800px){
			.modal__close_btn {
				width: 35px;
				height: 35px;
				right: -10px;
			}
				.modal__close_btn::before,
				.modal__close_btn::after {
					width: 25px;
				}
}

@media all and (min-width:720px){
/* リスト */
						.item__item__btn_wrap {
							width: 100%;
							height: 62px;
							border-radius: 31px;
							background-color: var(--color--white);
						}
								.item__item__btn {
									transition: .3s;
									opacity: 1;
								}
								.item__item__btn:hover {
									color: var(--color--white);
									opacity: .8;
									filter: drop-shadow(0px 3px 6px rgba(0,0,0,0));
								}
									.item__item__btn::after {
										transition: .3s;
									}
									.item__item__btn:hover::after {
										right: 21px;
									}
}

/* SP ================================================== */
@media all and (max-width:719px){
.lineoa {
	padding-bottom: 68px;
}
			.item__header__inner {
				max-width: initial;
			}
				.item_header__applicable_period {
					height: auto;
					padding: 12px 0;
				}
					.item_header__applicable_period__txt {
						font-size: 16px;
						line-height: 1.4;
					}
				.item_header__txt {
					max-width: initial;
					padding: 18px 0px;
				}
		.item__contents {
			width: 90.6666%;
			max-width: initial;
			padding: 30px 0 100px;
		}
			.item__contents__note {
				padding: 6px 0px;
				font-size: 12px;
			}
			.item__list {
				row-gap: 39px;
			}
				.item__item {
					width: 46.470588%;
				}
					.item__item__image {
						margin-bottom: 8px;
					}
						.item__item__image img {
							width: 95%;
							height: 95%;
						}
					.item__item__details {
						margin-bottom: 12px;
					}
						.item__item__maker {
							margin-bottom: 0px;
							font-size: 12px;
							line-height: 1.4166;
						}
						.item__item__name {
							font-size: 12px;
							line-height: 1.4166;
							letter-spacing: 0.03em;
						}
					.item__item__price {
						display: block;
						margin-bottom: 15px;
					}
						.item__item__price__nomal {
							display: flex;
							justify-content: space-between;
							align-items: center;
							width: 100%;
						}
						.item__item__price__nomal::before {
							width: 72px;
							height: 4px;
							background-color: #FF0000;
							position: absolute;
							bottom: 11px;
							left: auto;
							right: -2px;
							transform: translate(0%,0%) rotate(-21deg);
						}
							.item__item__price__nomal__heading {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								width: 52.265823%;
								height: 27px;
								padding-left: 7px;
								margin-bottom: 0;
								position: relative;
							}
								.item__item__price__nomal__heading::after {
									content: '';
									display: block;
									width: 0;
									height: 0;
									border-style: solid;
									border-width: 0 13.5px 27px 0;
									border-color: transparent #ffffff transparent transparent;
									position: absolute;
									top: 0;
									right: 0;
									z-index: 1;
								}
							.item__item__price__nomal__details {
								flex: 1;
								width: auto;
								margin-top: -2px;
							}
								.item__item__price__nomal__number {
									padding-right: 3px;
									margin-bottom: -1px;
									letter-spacing: 0.01em;
									text-align: right;
								}
								.item__item__price__nomal__tax {
									text-align: right;
								}
						.item__item__price__arrow {
							margin: 6px auto 8px;
							border-width: 8px 3.5px 0 3.5px;
							border-color: #696969 transparent transparent transparent;
						}
						.item__item__price__discount {
							width: 100%;
						}
							.item__item__price__discount__heading {
								justify-content: flex-start;
								width: 47.369747%;
								height: 35px;
								padding-left: 7px;
								padding-right: 0;
								font-size: 10px;
								line-height: 13px;
							}
								.item__item__price__discount__heading::after {
									border-width: 0 17px 35px 0;
								}
							.item__item__price__discount__details {
								flex: 1;
								height: auto;
							}
								.item__item__price__discount__number {
									margin-top: -2px;
									margin-bottom: 0px;
									font-size: 14px;
								}
									.item__item__price__discount__number .din {
										margin-right: 2px;
										font-size: 27px;
										top: 1px;
									}
								.item__item__price__discount__tax {
									font-size: 10px;
								}
									.item__item__price__discount__tax .din {
										margin-left: 2px;
										margin-right: 1px;
										font-size: 12px;
										top: 0px;
									}
								.item__item__btn {
									width: 100%;
									height: 30px;
									border-radius: 15px;
									font-size: 11px;
								}
									.item__item__btn::after {
										width: 5px;
										height: 5px;
										border-top: solid 1px var(--color--white);
										border-right: solid 1px var(--color--white);
										right: 11px;
									}

			.modal__close_btn {
				top: -10px;
				right: 0;
				transform: translate(0%,-100%);
			}
}