@charset "UTF-8";
/* 取扱製品スタイルシート */

section#img-garally {
	margin-bottom: 40px;
}
section#img-garally .garally-list {
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 32px 12px;
	& .garally-item {
		flex-flow: column;
		justify-content: start;
		align-items: start;
		width: calc(50% - 6px);
	}
	& .garally-item .img-wrapper {
		margin-bottom: 6px;
		aspect-ratio: 3 / 2;
		cursor: pointer;
	}
	& .garally-item .img-wrapper img {
		object-fit: cover;
		border-radius: 2px;
	}
	& .garally-item p {
		color: var(--blue);
		font-family: var(--zen);
		font-weight: 700;
		line-height: 1.2;
		word-break: keep-all;
		overflow-wrap: break-word;
	}
	& .garally-item p span {
		color: var(--blue);
		font-family: inherit;
		font-weight: inherit;
		font-size: 10px;
	}
	& .garally-item p br.pc-only {
		display: none;
	}
}

/* 各製品リンク先 */
section#link-banner {
	margin-bottom: 40px;
}
section#link-banner .section-wrapper {
	margin: 0 24px;
	padding: 12px;
	background: #fff;
	& h2 {
		padding-bottom: 6px;
		font-weight: 500;
		font-family: var(--zen);
		color: var(--blue);
	}
}
section#link-banner ul {
	& li {
		margin-bottom: 4px;
		margin-left: calc(1em + 4px);
		color: #2B63A8;
		position: relative;
	}
	& li::before {
		position: absolute;
		content: '\fffb5';
		right: calc(100% + 4px);
		font-family: var(--ggl-ico);
	}
}
@media (hover: hover) and (pointer: fine) {
	section#link-banner ul {
		& li a:hover {
			border-bottom: .5px solid;
		}
	}
}


/* 弊社オリジナル商品 */
section#products-sbpanel {
	margin-bottom: 60px;
}
section#products-sbpanel .section-wrapper {
	padding: 0 24px;
}
section#products-sbpanel .flex-wrapper {
	flex-flow: column;
}
section#products-sbpanel .flex-wrapper .original {
	width: 100%;
	height: 160px;
	position: relative;
	& h2 {
		position: absolute;
		padding: 6px 12px;
		color: #fff;
		font-size: 18px;
		top: 2px;
		left: 2px;
		z-index: 3;
		background: var(--blue);
		font-family: var(--zen);
		font-weight: 700;
	}
	& p {
		position: absolute;
		display: inline-block;
		left: 12px;
		color: var(--blue);
		background: #fff;
		z-index: 3;
	}
	& p.title {
		padding: 0 16px;
		font-family: var(--zen);
		font-weight: 700;
		font-size: 1.2em;
		top: 64px;
	}
	& p.text {
		padding: 2px 12px;
		top: 96px;
	}
	& .img-wrapper {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	& .img-wrapper::after {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(180deg, rgba(25, 16, 121, 0) 0%, rgba(25, 16, 121, 0.8) 100%);
		mix-blend-mode: multiply;
		z-index: 1;
	}
	& .img-wrapper img {
		object-fit: cover;
		object-position: 50% 20%;
	}
}
section#products-sbpanel .flex-wrapper .link {
	width: 100%;
	height: 52px;
	& a {
		display: inline-block;
		text-align: center;
		align-content: center;
		width: 100%;
		height: 100%;
		background: var(--blue);
	}
	& a span {
		color: #fff;
		position: relative;
	}
	& a span::before {
		position: absolute;
		display: block;
		content: '';
		top: 50%;
		right: -24px;
		transform: translateY(-50%);
		width: 32px;
		height: 32px;
		background: url(./../assets/img/common/arc.svg) no-repeat;
		background-position: center;
	}
	& a span::after {
		position: absolute;
		display: block;
		content: '';
		top: 50%;
		right: -34px;
		transform: translateY(-50%);
		width: 32px;
		height: 32px;
		background: url(./../assets/img/common/arc-arrow.svg) no-repeat;
		background-position: center;
		transition: all .3s;
	}
}
/* ホバーアニメーション */
@media (hover: hover) and (pointer: fine) {
	section#products-sbpanel .flex-wrapper .link {
		& a:hover span::after {
			right: -40px;
		}
	}
}

@media print, screen and (min-width: 764px) {
	section#img-garally .garally-list {
		gap: 52px 36px;
		& .garally-item {
			width: calc(100% / 3 - 27px);	
		}
		& .garally-item .img-wrapper {
			margin-bottom: 10px;
		}
		& .garally-item p {
			text-align: center;
			font-size: 1.2em;
		}
		& .garally-item p span {
			font-size: 14px;
		}
		& .garally-item p br.pc-only {
			display: inherit;
		}
	}
	section#link-banner .section-wrapper {
		width: 70%;
		margin: 0 auto;
		padding: 24px 40px;
		& h2 {
			margin-bottom: 12px;
		}
	}
	section#link-banner ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 12px;
		& li {
			width: calc(50% - 1em - 12px);
		}
	}
	section#products-sbpanel .section-wrapper {
		margin-bottom: 100px;
		padding: 0;
		width: 70%;
	}
	section#products-sbpanel .flex-wrapper {
		flex-flow: row;
	}
	section#products-sbpanel .flex-wrapper .original {
		width: 70%;
		height: 200px;
		& p {
			left: 28px;
		}
		& p.title {
			top: 78px;
		}
		& p.text {
			top: 116px;
		}
	}
	section#products-sbpanel .flex-wrapper .link {
		width: 30%;
		height: 200px;
		& a span {
			font-size: 1.3em;
		}
		& a span::before {
			top: 54%;
			right: -32px;
			width: 40px;
			height: 40px;
			background-size: 36px;
		}
		& a span::after {
			top: 54%;
			right: -46px;
			width: 40px;
			height: 40px;
			background-size: 32px;
		}
	}
	/* ホバーアニメーション */
	@media (hover: hover) and (pointer: fine) {
		section#products-sbpanel .flex-wrapper .link {
			& a:hover span::after {
				right: -52px;
			}
		}
	}
}